如何使用合并的单元格创建 CSS 网格系统

Question

我正在尝试实现以下布局：

如您所见，中间栏中的卡片占据了多个网格，以产生这种效果。

我有：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . ."
    ". . ."
    ". . .";
}

.grid-item {
  border: 1px solid black;
}

.grid-item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.grid-item:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
}

.grid-item:nth-child(5) {
  grid-column: 2;
  grid-row: 4;
}

.grid-item:nth-child(6) {
  grid-column: 3;
  grid-row: 1;
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

但是，我的方法绝对不是最可持续的，我的卡片渲染顺序也不是正确的（卡片从 1、7、2、3 等开始）。

我还没有看到使用 CSS grid 的方法，已经实现了像图像这样的布局，所以想知道 CSS grid 是否是这里的最佳解决方案？

Answer 1

要实现这一点，您主要必须更改网格容器的行为。

添加 grid-auto-flow: column; 解决了元素在行中移动的问题。
行数加倍意味着您可以在定位元素时“减半”工作。
在网格元素上，添加 grid-row: span 2 将它们设置为在您的设计中占据整个区域
然后你所要做的就是告诉第一个和倒数第二个从第二行开始。
如果您要在超过 3 列上进行迭代，它将每第 7 个元素减去第一个元素 (.grid-item:nth-child(7n-1)) 而不是 nth-to-last。在这种情况下，您还必须以不同方式定义网格，类似于以下内容。

  grid-template-rows: repeat( 6, auto );
  grid-auto-columns: 1fr;

您也可以删除网格区域定义。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 0px 0px;
}

.grid-item {
  border: 1px solid black;
  grid-row: span 2;
  
}

.grid-item:nth-child(1), .grid-item:nth-last-child(2) {
  grid-row: 2 / span 2;
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

如何使用合并的单元格创建 CSS 网格系统

How to create CSS grid system with merged cells

css

sass