css - 如何使用 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>