CSS 网格项目
1
2
3
4
5
子元素（项目）
网格容器包含网格项目。
默认情况下，容器在每一行中为每一列都有一个网格项目，但是您可以对网格项目进行样式化，以便它们跨越多个列和/或行。
grid-column 属性
The grid-column 属性定义了将项目放置在哪个列(s)上。
您定义了项目将从哪里开始，以及项目将从哪里结束。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注意: grid-column 属性是 grid-column-start 和 grid-column-end 属性的速记属性。
要放置一个项目，您可以参考行号，或者使用关键字“span”来定义项目将跨越多少列。
grid-row 属性
The grid-row 属性定义了将项目放置在哪个行上。
您定义了项目将从哪里开始，以及项目将从哪里结束。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
注意: grid-row 属性是 grid-row-start 和 grid-row-end 属性的速记属性。
要放置一个项目，您可以参考行号，或者使用关键字“span”来定义项目将跨越多少行
grid-area 属性
The grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的速记属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
命名网格项目
The grid-area 属性也可以用来为网格项目分配名称。
页眉
菜单
主体
右侧
页脚
命名网格项目可以通过网格容器的 grid-template-areas 属性进行引用。
示例
Item1 获取名称“myArea”并在五列网格布局中跨越所有五列
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
每一行由撇号(' ')定义
每一行中的列在撇号内定义，用空格分隔。
注意: 一个句号表示一个没有名称的网格项目。
示例
让“myArea”在五列网格布局中跨越两列（句号表示没有名称的项目）
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
要定义两行，在另一组单引号内定义第二行的列。
示例
使“item1”跨越两列 *和* 两行。
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
示例
命名所有项目，并制作一个可直接使用的网页模板。
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
项目的顺序
网格布局允许我们将项目放置在任何我们喜欢的位置。
HTML 代码中的第一个项目不必出现在网格中的第一个位置。
1
2
3
4
5
6
示例
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
您可以使用媒体查询重新排列特定屏幕尺寸的顺序。
示例
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
