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 417 · Answer 1 · edited Jun 15 '23 at 08:31

417

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.

edited Jun 15 '23 at 08:31

Temani Afif

245,468
26
309
415

answered Apr 16 '20 at 00:52

tcurdt

14,518
10
57
72

4

As far as I can tell, this is the only one that actually produces even-width columns. – James Baker May 26 '20 at 11:08
5

"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
@QMaster there is even a working codepen linked. Maybe explain what did not work for you? – tcurdt Oct 31 '20 at 01:58
11

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? – An Tran T. Aug 28 '21 at 05:39
3

@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
would you mind converting the codepen into [a stack snippet](https://meta.stackoverflow.com/q/358992/11107541)? – starball May 26 '23 at 07:11
The problem with this approach is it changes how entire grid is sized -- since `fr` is about distributing the space, the entire grid expands. – greenoldman Aug 20 '23 at 16:43
@greenoldman not sure I can follow. – tcurdt Aug 22 '23 at 01:09
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 :-). – greenoldman Aug 22 '23 at 14:04

wegry · Answer 2 · 2023-08-12T22:42:32.383

125

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

edited Aug 12 '23 at 22:42

answered Dec 21 '18 at 12:27

wegry

7,046
6
39
59

19

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
2

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 – Sergiy Ostrovsky Dec 23 '22 at 15:36
Agree with @SergiyOstrovsky, `minmax(0, 1fr)` works well for my grid. – Ed Gomoliako Aug 11 '23 at 13:16
1

@SergiyOstrovsky I've updated this answer to include `minmax(0, 1fr)` instead of 1fr. – wegry Aug 12 '23 at 22:43

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

48

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,799
66
75
101

answered Jul 19 '18 at 22:43

Kevin

1,934
1
15
10

4

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
this doesn't fix the equal width columns, it is good until the content of column start getting wrapped – saida lachgar Jan 31 '23 at 08:39

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

17

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,799
66
75
101

answered Dec 01 '17 at 22:39

Michael Benjamin

346,931
104
581
701

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 10 · Answer 5 · edited Sep 25 '19 at 14:26

10

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,799
66
75
101

answered Dec 15 '18 at 19:43

Alexis Vera

357
3
10

Dim Vai · Answer 6 · 2022-09-06T13:01:21.480

8

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

edited Sep 06 '22 at 13:01

answered Jun 27 '21 at 14:32

Dim Vai

726
8
14

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

5

How about this?

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

answered Mar 09 '21 at 23:01

TDAK

134
1
7

score 4 · 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 1 · 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.

score 0 · Answer 11 · edited Aug 28 '23 at 08:36

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>

Equal width columns in CSS Grid

11 Answers11

Linked

Related