Different sets of columns per row with CSS Grid

Question

I am trying to create a grid that looks like this,

Two columns in the first row and three columns in the second row. They should be equal in width, but my drawing skills aren't the best.

I am trying to accomplish this by targeting specific cells with something like this on the "Kort" cells,

  grid-row: 1; 
  grid-column: 2/4;

But I cannot seem to accomplish this. Any help is greatly appreciated.

Galagalactagogue

make 6 columns then divide the top by 2 and the bottom by 3 – Consider

@TemaniAfif could you might show some code? I'm a bit new to css grid. Thanks – Virago

Answer 1

As TemaniAfif pointed out in the comments, in order to achieve a layout like that with CSS grid, you first have to make 6 columns, and then have the two items in the first row each take 3 columns, and the three items in the second row to each take 2 columns.

An example:

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.first-row-item {
  grid-column: span 3;
}

.second-row-item {
  grid-column: span 2;
}

/* Stylistic, dont' mind: */
.item {
  border: 2px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

<div class="grid">
  <div class="item first-row-item">1</div>
  <div class="item first-row-item">2</div>
  <div class="item second-row-item">3</div>
  <div class="item second-row-item">4</div>
  <div class="item second-row-item">5</div>
</div>

Piliform

Answer 2

You have to cut each row in 6 columns in order to get the first row displayed in 2 columns (3 + 3) and the second row in 3 columns (2 + 2 + 2)

The grid starts from 1 and not 0.

The grid-column-start for .col1 is for 3 columns from 1 to 4 (total 3 columns)

For .col2 is from 4 to 7 (total 3 columns)

For .col3 is from 1 to 3 (total 2 columns)

For .col4 is from 3 to 5 (total 2 columns)

For .col5 is from 5 to 7 (total 2 columns)

.rows {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; display: grid;
}
.rows div { border: 1px solid #000;}
.rows .col1 {  grid-column-start: 1;
    grid-column-end: 4; }
.rows .col2 {     grid-column-start: 4;
    grid-column-end: 7; }
.rows .col3 {     grid-column-start: 1;
    grid-column-end: 3; }
.rows .col4 {     grid-column-start: 3;
    grid-column-end: 5; }
.rows .col5 {     grid-column-start: 5;
    grid-column-end: 7; }

<div class="rows">
  <div class="col1">1</div>
  <div class="col2">2</div>
  <div class="col3">3</div>
  <div class="col4">4</div>
  <div class="col5">5</div>
</div>

Totem

Answer 3

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow:row;
  gap: 1rem;
  
}
.col {
  grid-column: span 2;
  background: red;
  width: 100%;
}
.col:nth-child(5n+4) {
  grid-column: span 3;
  background: blue;
  width: 100%;
}
.col:nth-child(5n+5) {
  grid-column: span 3;
  background: blue;
  width: 100%;
}

<div class="grid">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col">14</div>
  <div class="col">15</div>
  <div class="col">16</div>
  <div class="col">17</div>
  <div class="col">18</div>
  <div class="col">19</div>
  <div class="col">20</div>
</div>

https://codepen.io/dobril/pen/gOrLoQJ

Broom

It would be useful to explain how this works, rather than copy and pasting code from Codepen. – Sweyn

Welcome to Stack Overflow. Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what this code does and how it answers the question, so that it is useful to the OP as well as other users with similar issues. – Rationalism