在3列CSS网格布局中取半宽[重复]

【问题标题】：Take half width in 3 columns CSS grid layout [duplicate]在3列CSS网格布局中取半宽[重复]
【发布时间】：2020-08-03 01:17:07
【问题描述】：

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

【问题讨论】：

使用 6 列而不是 3 列。
一些流行的 CSS 框架使用 12 列网格，因为它为您提供了布局的灵活性。
感谢您的提示，WFM！它还需要知道如何跨越 N 列而不事先知道它从哪里开始； grid-column auto / span N 为我工作。

标签： css css-grid

【解决方案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>

【讨论】：