How do I specify row heights in CSS Grid layout?
Solution 1
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);
}
Solution 2
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);
}
Comments
-
Chris almost 2 years
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: -
mikemaccana about 6 yearsAdditionally, time passes and now every major browser supports CSS grid.
-
John Karahalis almost 5 yearsWhat is the significance of
10px
in thecalc()
call? -
DannyMeister over 4 years@JohnKarahalis to compensate for the 10px
grid-gap
between the rows. -
kano over 4 years@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.. 🤔 -
DannyMeister over 4 yearsWell 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.