Equal width columns in CSS Grid

Question

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>

Spread

Answer 1

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.

Plovdiv

As far as I can tell, this is the only one that actually produces even-width columns. – Communal

"This breaks as soon as the content becomes bigger than the track size." - very valuable notice. Thank you! – Montague

I came here because repeat(3, 1fr) did not give the expected results and your solution works perfectly. Thank you! – Priggery

@QMaster there is even a working codepen linked. Maybe explain what did not work for you? – Plovdiv

When you don't know the number of columns you can instead do this: grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; – Ferrotype

How can I make content wrap? – Outflank

@TrườngAn I think you can use word-wrap: break-word; w3schools.com/cssref/css3_pr_word-wrap.asp – Hatpin

would you mind converting the codepen into a stack snippet? – Twila

The problem with this approach is it changes how entire grid is sized -- since fr is about distributing the space, the entire grid expands. – Antrum

@Antrum not sure I can follow. – Plovdiv

Let's say your entire content takes 100px, while your screen is 2000px. Once you put "1fr", not only the space for cells will be distributed, but also grid will expand taking entire screen (on width) -- 2000px. I already found a solution, using inline-grid instead of grid :-). – Antrum

I love you so much rn – Latta

Answer 2

@Michael_B's answer is almost there.

.grid-container {
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
}

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

Phenylamine

This should be the accepted answer as it's dynamic and it only needs properties on the main grid container. – Clite

This worked perfectly wheraes Kevin's accepted answer did not for me. For some reason Kevin's answer didn't distribute the width evenly whereas this did. – Aretha

This worked best for me because I have a dynamic number of columns, so can't really use fractions & percentages (that I know of). – Collotype

This didn't work for me. Seems like when content is bigger than it's container, it breaks the 1fr width. minmax() worked for me – Tema

Agree with @SergiyOstrovsky, minmax(0, 1fr) works well for my grid. – Edd

@SergiyOstrovsky I've updated this answer to include minmax(0, 1fr) instead of 1fr. – Phenylamine

Answer 3

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

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

Antitoxin

Is there also an option doing this with using auto? :) – Desegregate

didnt work for me. columns where still squeezed and thus difference width. – Swaggering

As @Antitoxin says grid container, you need to have display:grid; on it as well. – Bev

whether there are two, or three, or more child elements The question is asking about arbitrary number of columns, not hardcoded to 3 – Fuld

this doesn't fix the equal width columns, it is good until the content of column start getting wrapped – Gonyea

Answer 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:

• Does CSS Grid have a flex-grow function?
• The difference between percentage and fr units in CSS Grid Layout

Innocuous

that's still not working for me - columns take 100% of the width and are stacked one below the other - what am I missing? – Spread

@Spread Please mark answer as accepted (green check to the left from the answer) if it helped you. – Scottscotti

Exact same problem here: 4 boxes stacked on top of each other in stead of next to each other. – Zenger

@user63457, what's the desired behavior. How about adding grid-row: 1 to your grid items? Or how about this: jsfiddle.net/sk2jc1uy/2 – Innocuous

@Micheal_B The desired behaviour is as the original question describes. Adding grid-row:1 to the child elements looks like the correct solution, otherwise columns will be stacked. – Intellectualize

Yes, eventually I resorted to 4 times '1fr' to get the desired result (this design called for 4 columns only). One thing is sure though: 'auto' does not make the columns all the same width. – Zenger

@Intellectualize adding grid-auto-flow: column removes the need to add properties to children. – Phenylamine

Correct answer by @Antitoxin below. – Sarcasm

Answer 5

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 (selected using ">*" in css) do not need to have any specific class or even be div.

Example: https://codepen.io/dimvai/pen/RwVbYyz

Jaleesa

Answer 6

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;
}

Passus

Answer 7

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));
}

Heartbroken

Answer 8

How about this?

.row {
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
}

Stratagem

Answer 9

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

Identity

Answer 10

You can try to distribute each list to take all the space that the parent grid has for it, instead of allowing the grid to automatically distribute the space based on what each list has as content.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-container .list {
  width: 100%;
}

<div class="grid-container">
  <div class="list">a</div>
  <div class="list">b</div>
  <div class="list">c</div>
</div>

Antistrophe

Answer 11

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.

Analisaanalise