3列CSS网格布局中取半宽

Question

我们可以通过 CSS 网格创建如下图所示的布局吗？

Answer 1

您可以创建一个 6 列网格，并设置grid-column: auto / span 3;前两个元素和auto / span 2其余元素：

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 16px;
  grid-auto-rows: 32px;
}

.grid span {
  background-color: steelblue;
  grid-column: auto / span 2;
}

.grid span:nth-child(1),
.grid span:nth-child(2) {
  grid-column: auto / span 3;
}

<div class="grid">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>