CSS 网格（grid）项

网格子元素（项）

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

grid-column属性

grid-column属性定义放置项目的列。您可以定义项目的开始位置以及项目的结束位置。

注：grid-column属性是grid-column-start和grid-column-end属性的缩写属性。

要放置项目，您可以参考线号，或使用关键字“span”来定义项目将跨越的列数。

.item1 {
  grid-column: 1 / 5;
}

尝试一下

.item1 {
  grid-column: 1 / span 3;
}

尝试一下

.item2 {
  grid-column: 2 / span 3;
}

尝试一下

grid-row属性

grid-row属性定义放置项目的行。您可以定义项目的开始位置以及项目的结束位置。

注：grid-row属性是grid-row-start和grid-row-end属性的缩写属性。

.item1 {
  grid-row: 1 / 4;
}

尝试一下

.item1 {
  grid-row: 1 / span 2;
}

尝试一下

grid-area属性

grid-area属性可用作grid-row-start，grid-column-start，grid-row-end和grid-column-end属性的简写属性。

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

尝试一下

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

尝试一下

命名网格项

grid-area属性还可用于为网格项指定名称。

命名网格项可以由网格容器的属性grid-template-areas引用。

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: '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代码中的第一项不必显示为网格中的第一项。

.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; }
}

尝试一下