概念
CSS Grid网格布局,是一个二维的基于网格的布局系统。它与Flex布局最大的区别是,Flex是一维布局,只能处理一个维度上的元素布局,一行或者一列。而Grid布局是将容器划分成了行和列,产生了一个个的网格,可以灵活的对页面进行布局。
相关术语
在深入了解 Grid 的概念之前,理解术语是很重要的。
网格容器(Grid Container)
在一个元素上使用display:grid
属性设置,会将此元素变成网格容器,它是网格项的直接父级元素。
网格项(Grid Item)
网格项是网格容器的直接子元素。
网格线(Grid Line)
构成网格结构的分界线。它们既可以是垂直的,也可以是水平的,并位于行或列的任一侧。
网格轨道(Grid Track)
网格轨道就是两条相邻网格线之间的空间。可以把它们理解成网格的一行或一列。
网格单元格(Grid Cell)
网格单元格就是两个相邻的行和列之间的空间。也就是网格中的“一个格子”,也叫一个“单元”。
网格区域(Grid Area)
一个网格区域可以由任意数量的网格单元格组成。
容器的常用属性
网格容器的常用属性包括:display、grid-template-columns、grid-template-rows、grid-template-areas、grid-template、column-gap、row-gap、gap、justify-items、align-items、place-items、justify-content、align-content、place-content、grid-auto-columns、grid-auto-rows、grid-auto-flow、grid。
display
该属性的作用是将元素设置为网格容器,容器内子元素采用网格格式化上下文。可选的值有两个:
- grid:生成一个块级网格容器
- inline-grid:生成一个内联网格容器
grid-template-columns 和 grid-template-rows
这两个属性分别用来定义网格容器中网格轨道的尺寸<track-size>
,也就是每行或每列的大小。<track-size>
取值为一组使用空格分隔的值列表,可以是长度值、百分比或者等份网格容器中的可用空间(使用 fr
单位)。同时,还可以网格线的名称<line-name>
。
例如:
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
还可同时设置网格线名称。例如:
.container {
grid-template-columns: [first] 40px [col-line2] 50px [col-line3] auto [col-line4] 50px [col-line5] 40px [end];
grid-template-rows: [row-start] 25% [row-line2] 100px [row-line3] auto [row-last];
}
fr
单元代表使用等分网格容器剩余空间来设置网格轨道的大小 。例如,下面的代码会将每个网格项设置为网格容器宽度的三分之一:
.container {
grid-template-columns: 1fr 1fr 1fr;
}
grid-template-areas
通过引用网格项属性grid-area指定的“网格区域”名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号(.
)代表一个空单元格。这个语法本身可视作网格的可视化结构。可选值如下:
- grid-area-name:由网格项的
grid-area
属性指定的网格区域名称。 .
(点号):代表一个空的网格单元。none
:不定义网格区域。
grid-template
该属性用于定义 grid-template-rows、grid-template-columns、grid-template-areas简写形式。可选值如下:
- none:将所有三个属性设置为其初始值。
- grid-template-rows / grid-template-columns:将grid-template-columns和grid-template-rows设置为特定的值,并且设置grid-template-areas为none。
column-gap / row-gap
该属性用来指定网格线的大小。也可以把它想象为设置行或列之间的间距。
注意:只能在行或列之间创建间距,网格边缘不会有这个间距。
gap
该属性是 column-gap 和 row-gap 的简写语法。即:
.container {
gap: <row-gap> <column-gap>;
}
justify-items
该属性用来设置沿着行轴线对齐网格项(grid items)。此值适用于容器内的所有网格项。可选值:
- start:沿所在单元格左侧对齐
- end:沿所在单元格右侧对齐
- center:沿所在单元格水平居中对齐
- stretch:填满单元格的宽度(默认值)
align-items
该属性用来设置沿着列轴线对齐网格项(grid items)。此值适用于容器内的所有网格项。可选值:
- start:沿所在单元格顶部对齐
- end:沿所在单元格底部对齐
- center:沿所在单元格垂直居中对齐
- stretch:填满单元格的高度(默认值)
place-items
该属性是align-items和justify-items的简写形式。即:
.container {
place-items: <align-items> <justify-items>;
}
注意:如果省略第二个值,则将第一个值同时分配给这两个属性。
justify-content
该属性是针对整个网格而言的,当网格横向宽度小于容器宽度时,可以用该属性设置网格的对齐方式。可选的值包括:
- start:网格左侧对齐。
- end:网格右侧对齐。
- center:网格水平居中对齐。
- stretch:调整网格项(grid items) 的宽度,使其填充满整个网格容器的宽度。
- space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间。
- space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
- space-evenly:在每个网格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间
align-content
和justify-contend类似,该属性是设置竖直方向上的网格对齐方式。可选的值包括:
- start:网格顶端对齐。
- end:网格底部对齐。
- center:网格垂直居中对齐。
- stretch:调整网格项(grid items) 的高度,使其填充满整个网格容器的高度。
- space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间。
- space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
- space-evenly:在每个网格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间
place-content
该属性是align-content和justify-content的简写形式。即:
.container {
place-content: <align-content> <justify-content>;
}
注意:如果省略第二个值,则将第一个值同时分配给这两个属性。
grid-auto-columns / grid-auto-rows
该属性用来指定任何自动生成的网格轨道(grid tracks)(又名隐式网格轨道)的大小。当网格中的网格项多于单元格时,或者当网格项位于显式网格之外时,就会创建隐式轨道。取值可以是长度值、百分比或者等分网格容器中可用空间的份数(使用 fr
单位)。即:
.container {
grid-auto-columns: 60px;
}
注意:当我们引用的网格线不存在的时候,会创建宽度为 0 的隐式网格轨道以填补空缺。所以 grid-auto-columns 和 grid-auto-rows 可以来指定这些隐式轨道的大小。
grid-auto-flow
当有一些没有明确放置在网格上的网格项,可以用该属性告诉自动放置算法如何防止这些网格项。可选值包括:
- row:告诉自动布局算法依次填充每行,根据需要添加新行 (默认)。
- column:告诉自动布局算法依次填入每列,根据需要添加新列。
- dense:告诉自动布局算法在稍后出现较小的网格项时,尝试填充网格中较早的空缺。
grid
该属性是如下属性的简写形式:grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow。值的设置形式包括如下几种:
none
:将所有子属性设置为其默认值。grid-template
:同grid-template写法定义相同。grid-template-rows / [ auto-flow && dense? ] <grid-auto-columns>?
:将grid-template-rows设置为指定的值。如果 auto-flow 关键字位于斜杠的右侧,则会将 grid-auto-flow 设置为 column。如果另外指定了 dense 关键字,则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-columns,则将其设置为 auto。[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
:将 grid-template-columns 设置为指定值。 如果 auto-flow 关键字位于斜杠的左侧,则会将grid-auto-flow 设置为 row 。 如果另外指定了 dense 关键字,则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-rows ,则将其设置为 auto。
网格项的常用属性
网格项,也就是网格容器内子元素的常用属性包括:grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row、grid-area、justify-self、align-self、place-self。
grid-column-start / grid-column-end / grid-row-start / grid-row-end
通过引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置。 grid-column-start
/ grid-row-start
是网格项开始的网格线,grid-column-end
/ grid-row-end
是网格项结束的网格线。可选值包括:
<line>
:可以是一个数字引用一个编号的网格线,或者一个名字来引用一个命名的网格线span <number>
:该网格项将跨越所提供的网格轨道数量span <name>
:该网格项将跨越到所提供的名称位置auto
:表示自动放置,自动跨度,默认会扩展一个网格轨道的宽度或者高度
注意:
- 如果没有声明指定
grid-column-end
/grid-row-end
,默认情况下,该网格项将占据 1 个轨道。 - 网格项可以相互重叠。可以使用
z-index
来控制它们的重叠顺序。
grid-column / grid-row
分别是 grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的简写形式。值:
<start-line> / <end-line>
:每个网格项都接受所有相同的值,作为普通书写的版本,包括跨度。
即:
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
注意:如果没有声明分隔线结束位置,则该网格项默认占据 1 个网格轨道。
grid-area
为网格项提供一个名称,以便可以被使用网格容器 grid-template-areas
属性创建的模板进行引用。 另外,这个属性可以用作grid-row-start
+ grid-column-start
+ grid-row-end
+ grid-column-end
的简写。可设置的值包括:
<name>
:定义的名称<row-start> / <column-start> / <row-end> / <column-end>
:数字或分隔线名称
justify-self
沿着行轴线对齐网格项,此值适用于单个网格项内的内容。可选值包括:
start
:将网格项对齐到其单元格的左侧起始边缘(左侧对齐)end
:将网格项对齐到其单元格的右侧结束边缘(右侧对齐)center
:将网格项对齐到其单元格的水平中间位置(水平居中对齐)stretch
:填满单元格的宽度(默认值)
align-self
沿着列轴线对齐网格项,此值适用于单个网格项内的内容。可选值包括:
start
:将网格项对齐到其单元格的顶部起始边缘(顶部对齐)end
:将网格项对齐到其单元格的底部结束边缘(底部对齐)center
:将网格项对齐到其单元格的垂直中间位置(垂直居中对齐)stretch
:填满单元格的高度(默认值)
place-self
该属性是align-self 和 justify-self 的简写形式。可选值包括:
auto
– 采用 “默认” 对齐方式。<align-self> <justify-self>
:第一个值设置align-self
属性,第二个值设置justify-self
属性。如果省略第二个值,则将第一个值同时分配给这两个属性。
总结
本文是对Grid网格模型的一些概念和属性的总结,方便日后查阅。
如有错漏,欢迎指正讨论!!!