CSS Grid 布局：span 关键字

如果你使用 grid-column 或 grid-row 将项目放置到其父网格上，你可以使用 span 关键字来避免在项目跨越多列或多行时指定结束线。

给定以下用于跨越 3 列和 2 行的网格项目的 CSS 规则：

.item {
  grid-column: 2 / 5;
  grid-row: 1 / 3;
}

我们可以改用如下的 span 关键字：

.item {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
}

也可以提供结束线并将 span 用作起始线，这样 span 就会反向起作用，因此以下方式也是等效的：

.item {
  grid-column: span 3 / 5;
  grid-row: span 2 / 3;
}

---

如果多个线具有相同的名称，你可以像以下示例中那样定义起始和结束线：

.item {
  grid-column: col 2 / col 7;
  grid-row: content 6 / content 10;
}

该项目从名称为 col 的第 2 行开始，结束于同样被命名为 col 的第 7 行。类似地，它从名称为 content 的第 6 行开始，结束于同样被命名为 content 的第 10 行。

在这里，span 关键字也可以帮助，以下方式也是等效的：

.item {
  grid-column: col 2 / span col 5;
  grid-row: content 6 / span content 4;
}

---

span 也可以与 grid-area 属性一起使用。例如，如果我们希望一个项目被自动放置，但要跨越提供的行数和列数：

.item {
  grid-area: span 6 / span 4;
}