CSS Grid 如何设置跨列的单元格？

CSS Grid 是一种强大的布局方式，能够快速构建复杂的网格布局。在 CSS Grid 中，我们可以轻松地设置跨行或跨列的单元格，以实现更加灵活的布局。

设置跨列单元格

要设置跨列的单元格，我们可以使用 grid-column 属性。该属性指定了单元格的起始列和结束列，从而实现跨列的效果。

例如，我们有一个 3 列的网格布局，其中第 2 个单元格需要跨越 2 列，可以这样设置：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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

上述代码中，我们首先定义了一个 3 列的网格布局，然后将第 2 个单元格的 grid-column 属性设置为 2 / span 2，表示从第 2 列开始，跨越 2 列。

设置跨行单元格

要设置跨行的单元格，我们可以使用 grid-row 属性。该属性指定了单元格的起始行和结束行，从而实现跨行的效果。

例如，我们有一个 3 行的网格布局，其中第 2 个单元格需要跨越 2 行，可以这样设置：

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

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

上述代码中，我们首先定义了一个 3 行的网格布局，然后将第 2 个单元格的 grid-row 属性设置为 2 / span 2，表示从第 2 行开始，跨越 2 行。

设置跨行和跨列单元格

要同时设置跨行和跨列的单元格，我们可以将 grid-row 和 grid-column 属性组合起来使用。

例如，我们有一个 3 行 3 列的网格布局，其中第 2 行第 2 列的单元格需要跨越 2 行 2 列，可以这样设置：

// javascriptcn.com 代码示例
.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

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

上述代码中，我们首先定义了一个 3 行 3 列的网格布局，然后将第 2 行第 2 列的单元格的 grid-row 和 grid-column 属性都设置为 2 / span 2，表示从第 2 行第 2 列开始，跨越 2 行 2 列。

总结

CSS Grid 提供了强大的跨行跨列功能，可以轻松实现灵活的网格布局。我们可以使用 grid-column 和 grid-row 属性来设置跨列和跨行的单元格，也可以将两者组合起来设置跨行跨列的单元格。掌握这些技巧，可以让我们更加高效地构建复杂的网页布局。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6551ff2ad2f5e1655dbbc102