如何使用带有 css 网格的空单元格实现 2 x 2 布局？答案

【问题标题】：How to achieve a 2 by 2 layout with empty cells with css grid?如何使用带有 css 网格的空单元格实现 2 x 2 布局？
【发布时间】：2019-05-21 10:36:31
【问题描述】：

我有一个设计，其中整个页面具有 3x3 列布局，但是，页面的一个区域从 3 列变为 2 列，只需在每 3 列过去的位置留有负空间，如下所示：

即使你添加更多的 div 元素，像这样：

我正在考虑实现这一点的方法是使用带有网格区域的 css 网格，但是，当取消注释下面的两行时，这似乎不起作用：

.inner {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    // grid-template-areas: "c c .";
  > div {
    // grid-area: c;
  }
}

我在这方面是正确的，还是使用 Flexbox 更合适？

Link to a Codepen

【问题讨论】：

标签： css flexbox grid css-grid

【解决方案1】：

您可以考虑使用第三列/第一行的空元素，您将获得所需的结果：

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

.inner div {
  background:red;
  height:100px;
}
.inner:after {
  content:"";
  grid-row:1;
  grid-column:3;
}

<div class='container'>
  <h2>Title</h2>
  <div class='inner'>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
  </div>
</div>

更新

如果有更多元素，你可以试试这个：

.inner {
  display: grid;
  grid-column-gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.inner div {
  background:red;
  height:100px;
  margin-bottom:2rem; /*to replace row gap*/
}
.inner:after {
  content:"";
  grid-row:1 / span 50; /*take all the third column*/
  grid-column:3;
}

<div class='container'>
  <h2>Title</h2>
  <div class='inner'>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
    <div>
      Hey
    </div>
  </div>
</div>

【讨论】：

感谢 Temani，这可行，但我已经更详细地更新了我的问题。当添加更多 div 时，仍需要保留 2x2 列格式。不幸的是，有了这个解决方案，它就坏了。