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>

score 228 · Answer 1 · edited Nov 12 '21 at 11:37

228

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;

edited Nov 12 '21 at 11:37

Bernat

206
1
4
8

answered Apr 16 '20 at 00:52

tcurdt

12,410
10
58
68

3

Now surely, this here is the right answer. This appears to work correctly for me. – stephband Apr 23 '20 at 12:02
As far as I can tell, this is the only one that actually produces even-width columns. – Skip May 26 '20 at 11:08
Worked for me as well. Thumbs up to this one. – Justin Cefai May 29 '20 at 14:40
1

"This breaks as soon as the content becomes bigger than the track size." - very valuable notice. Thank you! – Takeshi Tokugawa YD Jun 23 '20 at 01:26
I came here because `repeat(3, 1fr)` did not give the expected results and your solution works perfectly. Thank you! – Rapti Aug 11 '20 at 11:34
Not Worked for me. – QMaster Oct 30 '20 at 23:46
@QMaster there is even a working codepen linked. Maybe explain what did not work for you? – tcurdt Oct 31 '20 at 01:58
Awesome. The perfect answer. – Gen1-1 Nov 24 '20 at 20:23
5

When you don't know the number of columns you can instead do this: `grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;` – zauni Jan 13 '21 at 14:44
How can I make content wrap? – antrtr Aug 28 '21 at 05:39
@TrườngAn I think you can use word-wrap: break-word; https://www.w3schools.com/cssref/css3_pr_word-wrap.asp – Benny Chan Oct 12 '21 at 05:39
I just wanted to say thank you for this answer I have been struggling with this issue for a long time – d0rf47 Nov 28 '21 at 06:30

score 101 · Answer 2 · edited Sep 25 '19 at 14:26

101

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

edited Sep 25 '19 at 14:26

TylerH

20,816
57
73
92

answered Dec 21 '18 at 12:27

wegry

6,266
5
34
51

17

This should be the accepted answer as it's dynamic and it only needs properties on the main grid container. – Christopher Bradshaw Aug 15 '19 at 20:58
1

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. – Jemar Jones Dec 29 '19 at 03:17
1

This worked best for me because I have a dynamic number of columns, so can't really use fractions & percentages (that I know of). – Lys777 Jul 04 '20 at 00:21
2

yeah! simple and elegant solution! – George Aug 10 '21 at 09:43

score 44 · Answer 3 · edited Sep 25 '19 at 14:26

44

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

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

edited Sep 25 '19 at 14:26

TylerH

20,816
57
73
92

answered Jul 19 '18 at 22:43

Kevin

1,812
1
15
10

3

Is there also an option doing this with using `auto`? :) – Roelant Nov 01 '18 at 20:44
11

didnt work for me. columns where still squeezed and thus difference width. – AlphaX Nov 17 '18 at 15:27
As @Kevin says grid container, you need to have `display:grid;` on it as well. – Esger Jun 25 '19 at 08:47
*whether there are two, or three, or more child elements* The question is asking about arbitrary number of columns, not hardcoded to 3 – mrossman Sep 23 '21 at 01:28

score 11 · Answer 4 · edited Sep 25 '19 at 14:25

11

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:

edited Sep 25 '19 at 14:25

TylerH

20,816
57
73
92

answered Dec 01 '17 at 22:39

Michael Benjamin

307,417
93
525
644

1

that's still not working for me - columns take 100% of the width and are stacked one below the other - what am I missing? – user1678736 Dec 05 '17 at 15:20
@user1678736 Please mark answer as accepted (green check to the left from the answer) if it helped you. – Vadim Ovchinnikov Mar 05 '18 at 06:03
Exact same problem here: 4 boxes stacked on top of each other in stead of *next* to each other. – JvO Mar 11 '18 at 20:36
@user63457, what's the desired behavior. How about adding `grid-row: 1` to your grid items? Or how about this: https://jsfiddle.net/sk2jc1uy/2/ – Michael Benjamin Mar 20 '18 at 15:05
1

@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. – user63457 Mar 21 '18 at 09:46
2

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. – JvO Mar 22 '18 at 23:08
@user63457 adding `grid-auto-flow: column` removes the need to add properties to children. – wegry Dec 21 '18 at 12:17
Correct answer by @Kevin below. – Andrew Dec 17 '19 at 16:14

score 9 · Answer 5 · edited Sep 25 '19 at 14:26

9

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

edited Sep 25 '19 at 14:26

TylerH

20,816
57
73
92

answered Dec 15 '18 at 19:43

Alexis Vera

339
3
8

score 5 · Answer 6 · answered Jun 27 '21 at 14:32

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.

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

score 3 · Answer 7 · answered Mar 09 '21 at 23:01

3

How about this?

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

answered Mar 09 '21 at 23:01

TDAK

114
7

score 3 · Answer 8 · answered Mar 05 '22 at 16:44

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

score 0 · Answer 9 · answered Oct 29 '20 at 15:57

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

score 0 · Answer 10 · answered Oct 30 '20 at 23:57

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.

Equal width columns in CSS Grid

10 Answers10

Linked

Related