手册
目录
收藏523
分享
阅读1027
更新时间2025-07-16
网格容器包含网格项目。
默认情况下，容器在每一行的每一列都有一个网格项目，但是您可以设置网格项目的样式，让它们跨越多个列和/或行。
grid-column 属性定义将项目放置在哪一列上。
您可以定义项目的开始位置以及结束位置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15注释：grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。
如需放置某个项目，您可以引用行号（line numbers），或使用关键字 "span" 来定义该项目将跨越多少列。
使 "item1" 从第 1 列开始并在第 5 列之前结束：
.item1 {
grid-column: 1 / 5;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使 "item1" 从第 1 列开始，并跨越 3 列：
.item1 {
grid-column: 1 / span 3;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使 "item2" 从第 2 列开始，并跨越 3 列：
.item2 {
grid-column: 2 / span 3;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
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" 定义该项目将跨越多少行：
使 "item1" 在 row-line 1 开始，在 row-line 4 结束：
.item1 {
grid-row: 1 / 4;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使 "item1" 从第 1 行开始并跨越 2 行：
.item1 {
grid-row: 1 / span 2;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
使 "item8" 从 row-line 1 和 column-line 2 开始，在 row-line 5 和 column line 6 结束：
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使 "item8" 从 row-line 2 和 column-line 开始，并跨越 2 行和 3 列：
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
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; }
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
