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:

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