Equal width columns in CSS Grid
HtmlCssGridCss GridHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
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;
Solution 2 - Html
@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.
Solution 3 - Html
Define this on your grid container. Sets up three columns of equal width.
grid-template-columns: repeat(3, 1fr);
Solution 4 - Html
Try this:
.grid-container {
display: grid;
grid-auto-columns: 1fr;
}
.grid-items {
grid-row: 1;
}
Otherwise, here's a demo that may be useful: jsFiddle
To learn about the fr
unit, see these posts:
Solution 5 - Html
This allows the columns to distribute better, and the columns are the same size regardless of whether the size of the items does not adjust.
.row {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}
.item {
grid-column: span 1;
}
Solution 6 - Html
The question asks for arbitrary number of columns, not 3! So use this:
.grid-container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
.grid-container > * {
overflow: hidden;
}
This way, its children do not need to have any specific class or even be div.
Solution 7 - Html
How about this?
.row {
display: grid;
grid-template-columns: repeat(3, calc(100% / 3));
}
Solution 8 - Html
Full-Width with Responsive Wrapping
None of these answers were full width or wrapped to a new row when downsizing on mobile. This is probably what you are looking for if you want something similar to bootstrap. Note the 200px is the lower bound where wrapping to a new row will occur.
.grid-container {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Solution 9 - Html
Here is simple answer(at least in my perspective). I got this issue above answers not helped me. Here the code to divide 'div' into equal width and with required number of columns.
//CSS
.grid-container {
display: grid;
grid-template-columns: auto auto auto; // no of 'auto's will be number of columns here it's 3
}
//HTML
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
more info on grid can be seen here W3Schools
Solution 10 - Html
None of these answers worked for me, So I tried another way. In my case, item size is related to the content. Some contents are bigger than others, so all columns will not be equal. I just wrapped any item with another division that has 100% width and 100% height and that is working.
<div class="row">
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
</div>
That is worked for me and I hope to help you.