Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

like image 644
knitevision Avatar asked Dec 03 '17 00:12

knitevision


People also ask

How do you specify the number of columns in a grid CSS?

To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels( px ) or percentages(%).

How do I make 3 columns in CSS Grid?

By using grid-template-columns: repeat(3, 1fr) on grid container you will get layout with 3 columns of equal width, and grid layout will by default make all items in each row equal height. Save this answer.

How do you set the number of rows and columns in a grid?

With a grid geometry manager, you can set a certain number of rows and columns and place the widget in any location of the application. To set a certain number of rows and columns, you'll need to specify the size value of the row and column configuration that helps to set the location of a particular widget.

How can you add some margin between the different rows of a CSS Grid?

The grid-row-gap property in CSS is used to define the size of the gap between the grid elements. The user can specify the width of the gap separating the rows by providing value to the grid-row-gap.


1 Answers

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:

enter image description here

like image 166
Michael Benjamin Avatar answered Oct 13 '22 17:10

Michael Benjamin