如何创建一个包含 5 个方块的 CSS 网格（第 1 行 2 个，第 2 行 3 个）

Question

我想创建格式布局，其中第一行有 2 个元素，第二行有 3 个元素，我有相反的版本，但无法还原行。

.container {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.block {
  background-color: red;
  grid-column-end: span 2;
}

.block:nth-last-child(-n+2) {
  background: blue;
  grid-column-start: 2
}
.block:nth-last-child(-n+1) {
  background: blue;

  grid-column-start: 4
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer 1

只需将第三个块的 CSS 添加为：

.block:nth-last-child(-n+3) {
  background: blue;
  grid-column-start: 1
}

这使红色块居中：

.block:nth-child(1) {
  grid-column-start: 2;
}

演示

.container {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.block {
  background-color: red;
  grid-column-end: span 2;
}
.block:nth-child(1) {
  grid-column-start: 2;
}
.block:nth-last-child(-n+3) {
  background: blue;
  grid-column-start: 1;
}
.block:nth-last-child(-n+2) {
  background: blue;
  grid-column-start: 3
}
.block:nth-last-child(-n+1) {
  background: blue;

  grid-column-start: 5
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

如何创建一个包含 5 个方块的 CSS 网格（第 1 行 2 个，第 2 行 3 个）

How to create a CSS grid with 5 blocks (2 on row 1, 3 on row 2)

css

layout

sass

css-grid