How do I specify row heights in CSS Grid layout? - html

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:

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

Answer 2

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>

Answer 3

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

Answer 4

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