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

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