Can I have a varying number of columns per row in a CSS grid?

Question

.grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    grid-template-rows: 100px;    grid-auto-rows: 60px;    grid-gap: 15px;  }    .col {    background-color: tomato;  }

<div class="grid">    <div class="col"></div>    <div class="col"></div>    <div class="col"></div>    <div class="col"></div>    <div class="col"></div>  </div>

This creates 2 rows, first is 100px height, second is auto-created with 60px height. 2 columns in the second row have 1fr width.

Is this possible via CSS Grid/Flexbox to horizontally center 2 columns in the 2nd row? I.e. have a varying number of columns per row.

I am stuck trying to solve a trivial usecase for the CSS Grid framework in the browser. This is pretty nonproblematic to achieve if you build your grids with Flexbox.

But can I achieve it with CSS Grid?

Here is a CodePen demo of what I am trying to achieve.

Answer 1

You're asking this:

Can I have a varying number of columns per row in a CSS Grid?

But then you're saying this:

Is this possible via CSS Grid/Flexbox to horizontally center 2 columns in the 2nd row?

It looks like you're stuck in a classic XY Problem: You're focusing on your attempted solution rather than your actual problem.

Yes, it is possible to center columns (and grid items, and content) in CSS Grid. (See various methods here: Centering in CSS Grid)

No, it's not possible to have a varying number of columns per row in a CSS Grid, or any grid for that matter. Otherwise, you don't have a grid.

Since appearance is often all that matters in a layout, you can build something that looks like three "columns" in the first row and two "columns" in the second row – centered – using CSS Grid.

In my example below, I've divided the horizontal space in the grid container among 12 columns. I've then used Grid's line-based placement features to position and size the items.

.grid {    display: grid;    grid-template-columns: repeat(12, 1fr);    grid-auto-rows: 40px;    grid-gap: 10px;  }    .col:nth-child(-1n + 3) {    grid-column: span 4;  }  .col:nth-last-child(2) {    grid-row-start: 2;    grid-column: 3 / span 4;  }  .col:nth-last-child(1) {    grid-row-start: 2;    grid-column: 7 / span 4;  }  .col {    background-color: tomato;  }

<div class="grid">    <div class="col"></div>    <div class="col"></div>    <div class="col"></div>    <div class="col"></div>    <div class="col"></div>  </div>

codepen demo

Here's what it looks like using Firefox DevTools: