How do I specify row heights in CSS Grid layout?

Question

I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem to find a solution.

Note: This is intended for an Electron app only, so browser compatibility is not really a concern.

I have the following CSS Grid Layout:

.grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-gap: 10px;
  height: calc(100vh - 10px);
}

.grid .box {
  background-color: grey;
}

.grid .box:first-child,
.grid .box:last-child {
  grid-column-start: 1;
  grid-column-end: -1;
}

/* These rows should 'grow' to the max height available. */
.grid .box:nth-child(n+5):nth-child(-n+7) {
  grid-column-start: 1;
  grid-column-end: -1;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Which creates the following grid:

When none of the boxes contain any content I would like the grid to look something like this:

I should've stated that this is for an Electron app only so browser compatibility is not really a concern. — Chris, Jan 29 '17 at 12:05
The Electron app I'm building has 1 view which is the grid like above. Since it's a grid I figured it would be fun to play around with the new CSS Grid Layout since it's (kinda) supported in Electron. — Chris, Jan 30 '17 at 14:02
still new to CSS grid, fr unit is nice but indeed auto was the key to solve my issue as well — Astronaut, Aug 18 '17 at 16:41

score 129 · Accepted Answer · edited May 23 '17 at 12:32

129

One of the Related posts gave me the (simple) answer.

Apparently the auto value on the grid-template-rows property does exactly what I was looking for.

.grid {
    display:grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
    grid-gap:10px;
    height: calc(100vh - 10px);
}

edited May 23 '17 at 12:32

Community

1
1

answered Jan 29 '17 at 01:43

Chris

3,680
6
26
43

2

What is the significance of `10px` in the `calc()` call? – John Karahalis Sep 21 '19 at 20:03
2

@JohnKarahalis to compensate for the 10px `grid-gap` between the rows. – DannyMeister Nov 19 '19 at 03:56
@DannyMeister that doesn't really make sense since the amount of rows is dynamic yet he only subtracts `10px`, which is equal to the gap between 2 rows.. – kano Feb 15 '20 at 10:40
Well I guess not compensation, but probably to make the upper and lower space around the grid be 5px which gives an even 5px (uncollapsed) margin around each row since grid-gap applies only in between elements in the grid. Reducing height by grid-gap or 2*grid-gap to taste seems fairly common in fullscreen applications I've seen. I prefer 2*grid-gap so whitespace around is same as inside. – DannyMeister Feb 16 '20 at 21:45
This was actually the solution in my case, too. I had rows, that I wanted to hide (using `display: none`) and the space wouldn't collapse **even** with `display: none`set on those cells. Turns out I had to make sure to use `auto` on those particular rows and set the `height` in the cells themselves. Needless to say it worked exactly the way it was supposed to. Thank you! – Igor Dec 06 '22 at 01:16

score 17 · Answer 2 · answered Nov 21 '22 at 12:18

There is also the need to specify the minimum height for the elements, otherwise if they have no content they will disappear.

:root{
  --body-margin:10px;
}
body{
  margin:var(--body-margin);
}
.grid {
  display:grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
  grid-gap:10px;
  height: calc(100vh - calc(2 * var(--body-margin)));
}
.grid div{
  min-height:20px;
  background-color: grey;
}
.grid 
  div:nth-child(n+5):nth-child(-n+7),
  div:first-child,
  div:last-child{
    grid-column-start: 1;
    grid-column-end: -1;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

up vote just for the aesthetic of that paper – saida lachgar May 16 '23 at 09:16 — saida lachgar, May 16 '23 at 09:16

score 4 · Answer 3 · answered Jan 05 '22 at 12:44

Use of repeat with grid

When boxes doesn't contain any content and If you want to get rid of the empty box spaces as well than you can use following.

grid-template-rows: repeat(2, auto) repeat(3, 1fr) repeat(2, auto);

Or more compact syntax as last two cell size will be by default auto if not defined:

grid-template-rows: repeat(2, auto) repeat(3, 1fr);

If you want some space in any case than you can use:

grid-template-rows: repeat(2, 10px) repeat(3, 1fr) repeat(2, 10px);

Finally CSS would be

.grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(2, auto) repeat(3, 1fr);
  grid-gap: 10px;
  height: calc(100vh - 10px);
}

score 2 · Answer 4 · answered Feb 20 '22 at 09:18

.periodic-table {
  display: grid;
  grid-template-columns: repeat(18, 60px);
  grid-template-rows: repeat(7, 70px) 40px repeat(2, 70px);
  grid-gap: 2px;
}

This code will create 18 columns each of them are 60px, and 7 rows of 70px 8th row will be 40px then again 9th and 10th row will be 70px.

How do I specify row heights in CSS Grid layout?

4 Answers4

Linked