CSS Grid - 第一行与第二行的列数可以不同[重复]答案

【问题标题】：CSS Grid - Number of Columns can be different in the first row than second row [duplicate]CSS Grid - 第一行与第二行的列数可以不同[重复]
【发布时间】：2020-08-07 11:01:39
【问题描述】：

我正在尝试了解如何实现在第一行采用两列、在第二行、第三行采用三列等等的布局。

<section>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
</section>

//CSS
section {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

上面的代码会给我两列布局，但是如何修改它以实现上述布局。

【问题讨论】：

我不懂你@Paulie_D，Grid 和 flexbox 一样是一种布局方法。
您创建 6 列，然后您可以跨越 2 列或 3 列
@TemaniAfif 或 12 列或 24 等。
@Paulie_D 我要问的是如何在 CSS Grid 中实现类似的布局。
Temani 给了你一个提示。您必须有许多列，然后指定每个元素将跨越多少列

标签： css css-grid

【解决方案1】：

您可以尝试如下：

section {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;
}

section div {
  grid-column: span 3;
  height: 50px;
  background: red;
}

section div:nth-child(n + 3) {
  grid-column: span 2;
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>

【讨论】：

【解决方案2】：

这正是我想要的。

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

div {
  height: 50px;
  background: red;
}
div:first-child {
  grid-column: 1 / 3;
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>

【讨论】：