如何在CSS网格中使用空单元格实现2 x 2布局？

Question

我有一个设计，整个页面的布局为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

Answer 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>