CSS网格-第一行与第二行的列数可以不同 [英] CSS Grid - Number of Columns can be different in the first row than second row

问题描述

我试图了解如何实现在第一行中包含两列，在第二行，第三行中包含三列，等等的布局。

I am trying to understand how to achieve a layout that takes two columns in the first row and three columns in the second row, third row, and so on.

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

上面的代码将为我提供两栏式布局，但如何将其修改为实现上述布局。

The above code will give me two-column layout but how to modify it to achieve mentioned layout.

推荐答案

这是我真正想要的。

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>

这篇关于CSS网格-第一行与第二行的列数可以不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！