CSS 网格项目

1

2

3

4

5

亲自试一试 »

子元素（项目）

一个网格容器包含网格项目。

默认情况下，容器的每一行中的每一列都有一个网格项，但您可以设置网格项的样式，以便它们跨越多列和/或多行。

网格列属性：

这个grid-column属性定义要在哪一列上放置项目。

您可以定义项目的开始位置和结束位置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

笔记：这个grid-columnproperty 是属性的简写grid-column-start和grid-column-end特性。

要放置物品，您可以参考行号，或使用关键字 "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-rowproperty 是属性的简写grid-row-start和grid-row-end特性。

要放置物品，您可以参考行号，或使用关键字 "span" 定义项目将跨越多少行：

示例

让 "item1" 从第 1 行开始，到第 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特性。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

示例

让 "item8" 从行线 1 和列线 2 开始，并在行线 5 和列线 6 结束：

.item8 {
grid-area: 1 / 2 / 5 / 6;
}

亲自试一试 »

示例

让 "item8" 从行线 2 和列线 1 开始，跨 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; }
}

亲自试一试 »