CSS Grid - Number of Columns can be different in the first row than second row

Question

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.

I don't understand you @Paulie_D, Grid is a layout method just like flexbox. — Sagar Sinha, Apr 23 '20 at 23:46
you create 6 columns and then you either span 2 columns or 3 columns — Temani Afif, Apr 23 '20 at 23:47
@Paulie_D What I am asking is how to achieve a similar layout in CSS Grid. — Sagar Sinha, Apr 23 '20 at 23:52
And Temani has given you a hint. You have to have MANY columns and then specify how many each element will span — Paulie_D, Apr 23 '20 at 23:54

score 6 · Answer 1 · answered Apr 23 '20 at 23:51

You can try like below:

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>

score 6 · Accepted Answer · answered Apr 24 '20 at 00:07

This is what I wanted actually.

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 Grid - Number of Columns can be different in the first row than second row

2 Answers2

Linked

Related