CSS网格：合并每第N行的单元格

Question

不确定这是否可行，但我想要一个 CSS 网格模板，其中每第 N 行（例如每第三或第四行）会将单元格合并为一个...例如，这是一张照片，我想要的是：

我知道如何使用

<table>

执行此操作，但将其应用于 CSS 网格时遇到问题。

Answer 1

最好的方法是使用CSS的“子网格”功能，但它还不能在所有浏览器中使用。

如果您有固定数量的列，那么您可以仅使用 CSS 执行相同的操作。这是一个有 4 列的示例，每第三行都是“跨越”的。

要了解的重要属性是“grid-column: span X”

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

.item {
  background: #ccc;
}

.item:nth-child(9n + 9) {
  grid-column: span 4;
}

<div class="grid">
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
  <div class="item">.</div>
</div>