Main Content Area

This is the classic "Holy Grail" layout - a design pattern that developers struggled with for years before CSS Grid made it simple!

The layout features:

Full-width header at the top
Left sidebar for navigation
Main content area that fills remaining space
Right sidebar for widgets
Full-width footer at the bottom
Footer sticks to bottom even with little content

Grid Template Areas

Named areas make layout intuitive and easy to understand.

Responsive Ready

Easy to rearrange for mobile with a simple media query.

Sticky Footer

Footer stays at bottom using grid-template-rows: auto 1fr auto.

The CSS Code

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 250px 1fr 200px;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
}

header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

/* Responsive */
@media (max-width: 900px) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "aside"
            "footer";
    }
}

Try resizing the browser window to see the responsive behavior!