css网卡对齐

Question

我想做这样的事情：

但我有这样的事情：

我正在使用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。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;