<div class="grid-container">
    <header>Header</header>
    <main>Main Content</main>
    <footer>Footer</footer>
</div>
html, body {
    height: 100%;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header, main, footer {
    padding: 1rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.