I’m really enjoying playing around with grids. But one thing that I kept running into was how to make the center rows expand to cover the rest of the view height. I was looking at it wrong. Here’s the code…

.container {
    display: grid;
    height: 100%;
    grid-template-columns: 6rem 12.5rem 1fr 12rem;
    grid-template-rows: auto auto 1fr auto;
    gap: 0px 0px;
    grid-auto-flow: row;
}
See the height set to 100%? That’s what did it for me. This is an elastic grid based on the font-size: 1vw declarator in the body, html styles which is why I am using rem’s. Just putting this here because I know I will be coming back to this in the future.