css grid cards alignment

Question

I want to make something like this:

but I have something like this:

I'm using css grid and I don't know how to align this 3 last cards like here 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

The first row can use four columns to accommodate three items (one has double width).

The second row needs three columns to accommodate three items (all equal width).

So look for the common denominator: Since 3 x 4 = 12, make a 12-column grid.

The three items in the first row can have their columns set to 6-3-3.

The three items in the second row can have their columns set to 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>