Full-Height Page Layout with Sticky Header and Footer using CSS Grid

html, body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
}

.grid-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header (auto), main content (1fr), footer (auto) */
    min-height: 100vh; /* Ensures container takes full viewport height */
}

header {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

main {
    background-color: #e0e0e0;
    padding: 20px;
}

footer {
    background-color: #d0d0d0;
    padding: 15px;
    text-align: center;
    border-top: 1px solid #ddd;
}

How it works: This CSS Grid snippet creates a full-height page layout. By setting `min-height: 100vh` on the `.grid-container` and ensuring `html, body` take full height, the layout spans the entire viewport. `grid-template-rows: auto 1fr auto` defines three rows: `auto` for the header and footer (taking only the space their content needs), and `1fr` for the `main` content, which makes it expand to fill all remaining vertical space. This effectively creates a 'sticky' footer that always rests at the bottom of the viewport or content if it exceeds the viewport height.