子元素（项目）

网格容器包含网格项目。

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

grid-column 属性：

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

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

注释：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 属性：

grid-row 属性定义了将项目放置在哪一行。

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

注释：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-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 列：