CSS 网格项
1
2
3
4
5
子元素（项目）
网格 容器 包含网格项目.
默认情况下，容器的每一行每一列都有一个网格项，但您可以设置网格项的样式，使它们跨越多列和/或多行。
grid-column 属性：
这 grid-column 属性定义在哪一列（哪一列）放置项目。
您定义项目从哪里开始，以及项目从哪里结束。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
笔记： 这grid-column property 是以下简写属性：grid-column-start 和grid-column-end 特性。
要放置物品，您可以参考 行号或者使用关键字“span”来定义该项目将跨越多少列。
grid-row 属性：
这 grid-row 属性定义在哪一行放置项目。
您定义项目从哪里开始，以及项目从哪里结束。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
笔记： 这grid-row property 是以下简写属性：grid-row-start 和grid-row-end 特性。
要放置物品，您可以参考 行号或者使用关键字“span”来定义项目将跨越多少行：
grid-area 属性
这 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
命名网格项
这 grid-area 属性还可用于为网格项分配名称。
标头
菜单
主要的
正确的
页脚
命名网格项可以通过以下方式引用： grid-template-areas 网格容器的属性。
例子
Item1 的名称为“myArea”，并跨越五列网格布局中的所有五列：
.项目1 {
网格区域：我的区域；
}
.网格容器 {
网格模板区域：'我的区域 我的区域 我的区域 我的区域 我的区域'；
}
亲自尝试 »
每行由撇号 (' ') 定义
每行中的列在撇号内定义，并以空格分隔。
笔记： 句点符号表示没有名称的网格项。
要定义两行，请在另一组撇号内定义第二行的列：
例子
命名所有项目，并制作一个可立即使用的网页模板：
.item1 { 网格区域：标题； }
.item2 { 网格区域：菜单； }
.item3 {网格区域：主要；}
.item4 { 网格区域：右； }
.item5 { 网格区域：页脚； }
.网格容器 {
网格模板区域：
‘页眉页眉页眉页眉’
'菜单主页主页主页右右'
'菜单页脚页脚页脚页脚页脚';
}
亲自尝试 »
物品的顺序
网格布局允许我们将项目放置在我们喜欢的任何位置。
HTML 代码中的第一个项目不必作为网格中的第一个项目出现。
1
2
3
4
5
6
例子
.item1 { 网格区域： 1 / 3 / 2 / 4; }
.item2 { 网格区域： 2 / 3 / 3 / 4; }
.item3 { 网格区域： 1 / 1 / 2 / 2; }
.item4 { 网格区域： 1 / 2 / 2 / 3; }
.item5 { 网格区域： 2 / 1 / 3 / 2; }
.item6 { 网格区域： 2 / 2 / 3 / 3; }
亲自尝试 »
您可以使用媒体查询重新排列特定屏幕尺寸的顺序：
例子
@media 仅限屏幕和（最大宽度：500px）{
.item1 { 网格区域： 1 / 跨度 3 / 2 / 4; }
.item2 { 网格区域： 3 / 3 / 4 / 4; }
.item3 { 网格区域： 2 / 1 / 3 / 2; }
.item4 { 网格区域： 2 / 2 / 跨度 2 / 3; }
.item5 { 网格区域： 3 / 1 / 4 / 2; }
.item6 { 网格区域： 2 / 3 / 3 / 4; }
}
亲自尝试 »
