一、概念

网格容器包含了一个或多个网格元素。默认情况下，网格容器的每一列和每一行都至少有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。

二、主要属性

1、grid-column 属性

grid-column 属性用于指定网格元素的列位置。

.grid-item {
  grid-column: 1 / 3; /* 从第1列开始，在第3列之前结束 */
}

注意

• grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。
• 当跨度只有一个单元格时候，可以省略结束线：grid-column: 1 / 2 可以简写为 grid-column: 1;

2、grid-row 属性

grid-row 属性用于指定网格元素的行位置。

.grid-item {
  grid-row: 1 / 3; /* 从第1行开始，在第3行之前结束 */
}

注意

• grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。
• 当跨度只有一个单元格时候，可以省略结束线：grid-row: 1 / 2 可以简写为 grid-row: 1;

3、 grid-area 属性

grid-area 属性用于指定网格元素的区域位置。

注意

• grid-area 是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

.grid-item {
  grid-area: 1 / 1 / 3 / 3; /* 从第1行第1列开始，在第3行第3列之前结束 */
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24