Как добиться макета 2 на 2 с пустыми ячейками с сеткой CSS?

Question

У меня есть дизайн, где вся страница имеет макет столбца 3х3, однако одна область страницы переходит от 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?

Ссылка на 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>