I simply want to be able to have my grid fit the entire page, even if there’s not enough content in each row to expand it. I only want to do this for the middle row though.

I want my grid to fit the whole page and fit it exactly at the edges to be able to be responsive regardless of browser/device. I’m planning on making a separate media query for mobile/tablets once I figure this part out.

I’ve tried grid-template rows with varying values for different rows, but it won’t let me use auto for my header and footer so I gave up on that.

I can put values to the right of each row in .grid {grid-template}, but that depends on vh which is responsive, but I don’t feel as though it’ll be that nice even if it is responsive.

Should I wrap the grid container in a flexbox? I’m really lost on what to do.

//Sass

@mixin border {
    border: solid black 3px;
}

.grid {
    display: grid;
    gap: 10px;
    grid-template:
        "navbar navbar navbar navbar navbar config"
        "sidebar main main main main main"
        "footer footer footer footer footer footer";

    grid-template-columns: 200px 1fr 1fr 1fr 1fr 1fr;

    .main {
        grid-area: main;
        @include border();
        padding: 10px;
    }

    header {
        grid-area: navbar;
        @include border();
    }

    .config {
        grid-area: config;
        @include border();
    }

    .sidebar {
        grid-area: sidebar;
        @include border();
    }

    .footer {
        grid-area: footer;
        text-align: center;
        @include border();
    }
}