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。

​

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

​