Full-Height Page Layout with Header, Main, Footer using CSS Grid

html, body {
    height: 100%;
    margin: 0;
}

.page-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, main content, footer */
    min-height: 100vh; /* Ensures container takes full viewport height */
    gap: 1rem; /* Space between sections */
}

header {
    background-color: #e0e0e0;
    padding: 1rem;
}

main {
    background-color: #f8f8f8;
    padding: 1rem;
}

footer {
    background-color: #e0e0e0;
    padding: 1rem;
}

How it works: This CSS Grid snippet creates a classic full-height page layout. The `.page-container` is set to `display: grid;` and `min-height: 100vh;` to cover the entire viewport. `grid-template-rows: auto 1fr auto;` defines three rows: an `auto` height for the header (adjusts to content), `1fr` for the main content (takes all remaining space), and another `auto` for the footer. This structure ensures the main content area always expands to fill the available vertical space between the header and footer.