Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Equal width columns in CSS Grid

I'd like to have the html below showing in n equal columns whether there are two, or three, or more child elements to the row element using css grid - Flexbox makes this easy but I cannot get it done using css grid - any help is appreciated.

<div class="row">     <div class="item"></div>     <div class="item"></div>     <div class="item"></div> </div> 
like image 541
user1678736 Avatar asked Dec 01 '17 21:12

user1678736


People also ask

How do I make all the columns the same width in CSS?

The CSS to make all the columns equal in width is as follows. The table-layout: fixed; rule specifies that the table is to take its dimensions from the <table> element's width and the width of the first row of cells (or the <col> elements, if you have them).

How do you change the grid width of a column in CSS?

Set the following on the grid container: grid-template-columns: auto 1fr; This sets the width of the first column to equal the width of the widest item in that column, and the width of the second column to get the remaining width of the grid.

What is 1fr in grid-template-columns?

Each column is equal. 1fr=25% of the available space.

How do I use grid-template-columns to repeat?

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); This way, we get a repeating number of columns (thanks to repeat() ) that will fill all of the available space of the grid (thanks to auto-fit ) while never shrinking narrower than 250px and each taking up an equal fraction of space (thanks to minmax() ).


2 Answers

TL;DR

grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; 

The common answer of repeat(3, 1fr) is not quite correct.

This is because 1fr is about the distribution of available(!) space. This breaks as soon as the content becomes bigger than the track size. By default, it does not overflow and adjust the column width accordingly. That's why not all 1fr are guaranteed to be of equal width. 1fr is actually rather just a shorthand for minmax(auto, 1fr).

If you really need the columns to be the exact same width you should use:

grid-template-columns: repeat(3, minmax(0, 1fr)); 

minmax(0, 1fr) allows the grid tracks to be as small as 0 but as large as 1fr, creating columns that will stay equal. But, be aware that this will cause overflows if the content is bigger than the column or cannot be wrapped.

Here is an example that demonstrates the difference.

Finally, as @wegry and @zauni pointed out, to make it work for any number of child columns, you can take advantage of grid-auto-columns and grid-auto-flow and use this:

grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; 
like image 164
tcurdt Avatar answered Sep 27 '22 22:09

tcurdt


@Michael_B's answer is almost there.

.grid-container {    display: grid;    grid-auto-columns: 1fr;    grid-auto-flow: column; } 

Gives you one row of equally sized columns in Chrome, Firefox, and Safari as of writing.

like image 33
wegry Avatar answered Sep 27 '22 20:09

wegry