CSS网格在第一行中两列，在第二和第三行中三列[重复]

Question

此问题已经在这里有了答案：

Can I have a varying number of columns per row in a CSS grid?（5个答案）

已关闭1分钟前。

我正在学习CSS网格，但我试图了解如何实现在第一行中包含两列，在第二行，第三行中包含三列，等等的布局。

<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;
}

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

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

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