CSS Grid Item
1
2
3
4
5
子元素(项目)
一个 grid 容器 包含 grid 项目。
默认情况下,一个容器对于每一行中的每一列都有一个 grid 项目,但你可以对 grid 项目进行样式设置,使其跨越多个列和/或行。
grid-column 属性
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
属性的简写属性。
要放置一个项目,你可以引用线编号,或者使用关键字 "span" 来定义项目将跨越多少列。
grid-row 属性
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 属性
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 项目
grid-area
属性也可用于为 grid 项目分配名称。
Header
菜单
主菜单
Right
页脚
命名 grid 项目可以通过 grid 容器的 grid-template-areas
属性来引用。
示例
Item1 被命名为 "myArea",并在一个五列的网格布局中跨越所有五列
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
每一行由单引号 (' ') 定义
每一行中的列在单引号内定义,用空格分隔。
注意: 点号(.)代表一个没有名称的 grid 项目。
示例
让 "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';
}
项目的顺序
Grid Layout 允许我们将项目放置在我们喜欢的任何位置。
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; }
}