有一个项目跨越多列 CSS 网格 - CSS

在 CSS 网格布局中，我们可以使用 grid-row 和 grid-column 属性将一个元素放置在网格布局中的指定行和列中。然而，有时候我们需要将一个元素跨越多列，这时该怎么做呢？

手动指定多列跨度

一种常见的做法是手动指定元素在网格布局中跨越的列数。例如，如果我们要将一个元素跨越 3 列，我们可以这样写：

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

.item {
  grid-column: span 3;
}

上面的代码中，我们使用了 span 关键字来指定元素要跨越多少列。这种做法比较简单，但是如果我们需要在不同的分辨率下使用不同的列数，就需要手动修改代码。

使用 auto-fit 和 minmax 自适应列数

为了让元素在不同分辨率下自适应跨越的列数，我们可以使用 auto-fit 和 minmax 来设置网格布局的列数。例如，如果我们想要一个元素在响应式布局下跨越 2 列，可以这样写：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item {
  grid-column: span 2;
}

上面的代码中，我们使用了 repeat(auto-fit, minmax(200px, 1fr)) 来指定网格布局的列数。其中，auto-fit 表示网格布局的列数会根据可用空间自动适应，minmax(200px, 1fr) 表示每列的最小宽度为 200px，最大宽度为 1fr。这样，我们就可以使用 span 2 来让一个元素在响应式布局下跨越 2 列了。

结语

通过手动指定跨越的列数和使用自适应列数，我们能够轻松地将一个元素跨越多列。在开发响应式布局时，使用自适应列数会更加灵活。