CSS Grid网格布局是为二维布局服务的(同时沿着横向和纵向),Flexbox弹性布局是为一维布局服务的(只能沿横向或纵向的)。
CSS Grid网格布局容器属性有:
- display: grid|inline-grid(创建网格容器)
- grid-template-columns(列)
- grid-template-rows(行)
- grid-template-areas(网格划分区域)
- grid-template(grid-template-rows/grid-template-columns和grid-template-areas属性的缩写)
- column-gap(列间距)
- row-gap(行间距)
- gap(行间距 列间距的简写)
- justify-items(指定了网格元素的水平呈现方式)
- align-items(网格元素的垂直呈现方式)
- place-items(align-items和justify-items属性的简写)
- justify-content(网格元素的水平分布方式)
- align-content(网格元素的垂直分布方式)
- place-content(align-content和justify-content属性的简写)
- grid-auto-columns(自动生成的隐式网格轨道列)
- grid-auto-rows(自动生成的隐式网格轨道行)
- grid-auto-flow(明确指定位置的grid子项的放置方式)
- grid(grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns和grid-auto-flow简写)
grid-template-columns和grid-template-rows
grid-template-columns和grid-template-rows是用来给网格划分列和行。
grid-template-columns: none | <track-size> ... | <line-name> <track-size> ...
- none:表示不明确的网格。所有的行和其大小都将由grid-template-columns|grid-auto-rows属性隐式的指定。、
- 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 [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
一行也可以有多个名称。例如,此处第二行将具有两个名称:row1-end和row2-start:
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
如果您的定义包含重复的部分,则可以使用repeat()符号简化内容:
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
grid-template-areas
grid-template-areas就是给网格划分区域。使用网格元素上的grid-area属性指定的网格区域命名,来组合单元格或合并单元格。
grid-template-areas: <grid-area-name> | . | none
- <grid-area-name>:对应网格区域的名称即网格元素上的grid-area属性值
- .表示空的网格单元格。
- none:没有定义网格区域。
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: repeat(4,50px);
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
这将创建一个四列宽,三行高的网格。整个第一行将由标题区域组成。中间行将由两个主要区域组成,一个为空白单元格,另一个为侧边栏区域。最后一行都是页脚。
声明中的每一行都必须具有相同数量的单元格。
您可以使用任意数量的相邻点号来声明一个空单元格。只要点号之间没有空格,它们就代表一个单元格。
请注意,您并不是用这种语法命名行,而只是命名区域。使用此语法时,实际上会自动命名区域两端的行。如果网格区域的名称为foo,则该区域的起始行和起始列的名称将为foo- start,其最后一行和最后一列的名称将为foo- end。这意味着某些行可能具有多个名称,例如上例中的最左边的行,它将具有三个名称:header-start,main-start和footer-start。
grid-template
grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。
.container {
grid-template: none | <grid-template-rows> / <grid-template-columns>;
}
- none:将所有三个属性设置为其初始值
- <grid-template-rows> / <grid-template-columns> –分别设置grid-template-columns和grid-template-rows为指定值,并设置grid-template-areas为none。
它还接受用于指定所有这三种的更复杂但非常方便的语法。这是一个例子:
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
等效于:
.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
由于grid-template不会重置一些隐式的grid属性(如grid-auto-columns,grid-auto-rows和grid-auto-flow),因此,大多数时候,还是推荐使用grid代替grid-template。
column-gap(grid-column-gap)、row-gap(grid-row-gap)
column-gap、row-gap指定网格中网格间隙的尺寸。您可以将其视为在列/行之间设置的宽度/高度。
.container {
/* 标准 */
column-gap: <line-size>;
row-gap: <line-size>;
/* 老的写法 */
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}
推荐使用column-gap和row-gap属性。Chrome68+、Safari 11.2 Release 50+和Opera54+已经支持没有grid-前缀属性的column-gap和row-gap。
gap(grid-gap)
gap属性是column-gap和row-gap属性的缩写。
.container {
/* 标准 */
gap: <grid-row-gap> <grid-column-gap>;
/* 老的写法 */
grid-gap: <grid-row-gap> <grid-column-gap>;
}
如果未指定row-gap行间距,则将其设置为与column-gap列间距相同的值。
注意:grid-gap不推荐使用的,推荐使用gap。chrome68+、Safari 11.2 Release 50+和Opera 54+已经支持gap属性。
justify-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐,语法如下:
- stretch:填充单元格的整个宽度(这是默认设置)
- start:将网格元素与单元格左侧对齐(假设文档流方向没有变)
- end:将网格元素与单元格右侧对齐(假设文档流方向没有变)
- center:将项目在其单元格水平居中对齐。
也可以通过该justify-self属性在单个网格项目上设置此行为。
align-items
align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐,语法如下:
- stretch:填充单元格的整个有高度(这是默认设置)
- start:将网格元素与单元格上侧对齐(假设文档流方向没有变)
- end:将网格元素与单元格下侧对齐(假设文档流方向没有变)
- center:将项目在其单元格垂直居中对齐。
也可以通过该align-self属性在单个网格项目上设置此行为。
place-items
place-items是align-items和justify-items属性的简写。语法如下:
place-items: <align-items> <justify-items>?;
纵在前,横在后,如果省略第二个值,则将第一个值分配给两个属性。除Edge之外,所有主流浏览器均支持place-items属性。
justify-content
justify-content指定了网格元素的水平分布方式。此属性仅在网格总宽度小于grid容器宽度时候有效果。例如,我们网格设定的都是固定的宽度值,结果还有剩余空间。
- stretch:宽度填满grid容器,拉伸效果需要网格元素尺寸设为auto时候才有效,如果定死了宽度,则无法拉伸。
- start:与文档流方向相关。默认表现为左对齐。
- end:与文档流方向相关。默认表现为右对齐。
- center:表现为居中对齐。
- space-between:表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
- space-around:每个grid子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
- space-evenly:也就是视觉上,每个grid子项两侧空白间距完全相等。
align-content
align-content可以看成和justify-content是相似且对立的属性,justify-content指明水平方向grid子项的分布方式,而align-content则是指明垂直方向每一行grid元素的分布方式。如果所有grid子项只有一行,则align-content属性是没有任何效果的。
同样拥有stretch、start、end、center、space-between、space-around、sapce-evenly属性值,方向为垂直方向。
place-content
place-content是align-content和justify-content属性的简写。
也是纵在前,横在后。如果省略第二个值,则将第一个值分配给两个属性。除Edge之外,所有主流浏览器均支持place-content属性。
grid-auto-columns和grid-auto-rows
指定任何自动生成的网格轨道(也称为隐式网格轨道)的大小。 当网格项目多于网格中的单元格或网格项目放置在显式网格之外时,将创建隐式轨道。
grid-auto-flow
grid-auto-flow属性控制没有明确指定位置的grid子项的放置方式。比方说定义了一个5*2的10格子,共有5个元素,其中2个元素指定了放在哪个格子里,还有3个则自生自灭排列。此时,这3个元素如何排列就是由grid-auto-flow属性控制的。
row:默认值。没有指定位置的网格依次水平排列优先。
column:没有指定位置的网格依次垂直排列优先。
dense:如果有设置,则表示自动排列启用“密集”打包算法。如果稍后出现的网格比较小,则尝试看看前面有没有合适的地方放置,使网格尽可能稠密紧凑。此属性值仅仅改变视觉顺序,会导致DOM属性和实际呈现顺序不符合,这对于可访问性是不友好的,建议谨慎使用。
<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</section>
您定义一个具有五列两行的网格,并将其设置grid-auto-flow为row(这也是默认值):
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
将项目放置在网格上时,只需为其中两个指定点:
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
因为设置grid-auto-flow为row,所以网格将如下所示。请注意,我们没有放置的三个项目(item-b,item-c和item-d)如何在可用行之间流动:
网格自动流设置为行的示例:如果改为设置grid-auto-flow为column,则item-b,item-c和item-d沿列向下流动:
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}
grid
grid是下面所有这些CSS属性的缩写集合,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。
以下两个代码块是等效的:
.container {
grid: 100px 300px / 3fr 1fr;
}
.container {
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
}
以下两个代码块是等效的:
.container {
grid: auto-flow / 200px 1fr;
}
.container {
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
}
以下两个代码块是等效的:
.container {
grid: auto-flow dense 100px / 1fr 2fr;
}
.container {
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
}
以下两个代码块是等效的:
.container {
grid: 100px 300px / auto-flow 200px;
}
.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}
它还接受一种更复杂但非常方便的语法,用于一次设置所有内容。您可以指定grid-template-areas,grid-template-rows并且grid-template-columns,和其他所有子属性都设置为它们的初始值。您正在执行的操作是在其各自的网格区域内指定行名称和轨道大小。用示例最容易描述:
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
等效于:
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}
参考摘录与: