выравнивание карт сетки css

Question

Я хочу сделать что-то вроде этого:

но у меня есть что-то вроде этого:

I 'м с использованием сетки CSS, и я не знаю, как выровнять эти 3 последние карты, как здесь 1

.wrapper {
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 10px;
  grid-auto-rows: 200px 150px;
  margin-bottom: 20px;
}

.cards:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.cards {
  background-color: aqua;
}

.cards:nth-child(6) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 3 / 3;
}

.cards:nth-child(7) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 3 / 3;
}

.cards:nth-child(8) {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row: 3 / 3;
}

<div class="wrapper">

  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>

</div>

Answer 1

В первой строке могут использоваться четыре столбца для размещения трех элементов (один имеет двойную ширину).

Второй строке требуется три столбца для размещения трех элементов (все равной ширины).

Итакнайдите общий знаменатель: начиная с 3 x 4 = 12, сделайте сетку из 12 столбцов.

Для трех элементов в первой строке столбцы могут быть установлены в 6-3-3.

три элемента во втором ряду могут иметь столбцы 4-4-4.

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px 150px;
  max-width: 940px;
}

.cards:nth-child(1) { grid-column: 1 / 7;  grid-row: 1 / 3; }
.cards:nth-child(2) { grid-column: 7 / 10;  grid-row: 1 / 2; }
.cards:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 2; }
.cards:nth-child(4) { grid-column: 7 / 10;  grid-row: 2 / 3; }
.cards:nth-child(5) { grid-column: 10 / 13; grid-row: 2 / 3; }
.cards:nth-child(6) { grid-column: 1 / 5;  grid-row: 3 / 4; }
.cards:nth-child(7) { grid-column: 5 / 9;  grid-row: 3 / 4; }
.cards:nth-child(8) { grid-column: 9 / 13; grid-row: 3 / 4; }

.cards {
  background-color: aqua;
}

<div class="wrapper">
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
</div>