Equal width columns in CSS Grid

97,570

Solution 1

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

@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

Define this on your grid container. Sets up three columns of equal width.

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

Solution 4

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

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;
}
Share:
97,570
user1678736
Author by

user1678736

Updated on November 13, 2021

Comments

  • user1678736
    user1678736 over 2 years

    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>