Grid Areas

Grid Areas

Grid areas let you name regions of your grid and assign items to them by name. The result is a layout definition that visually resembles the actual page structure — the most readable way to define complex layouts.

Defining Areas

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    gap: 10px;
    min-height: 100vh;
}

Each string represents a row. Each word in the string names a cell. Repeating a name spans that area across multiple cells.

Assigning Items to Areas

header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
footer  { grid-area: footer; }

The grid-area property on items tells them which named area to occupy. The HTML order does not matter — the grid-template-areas controls the layout.

Visualizing the Layout

grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";

┌──────────────────────────────┐
│          header              │
├────────┬─────────────────────┤
│sidebar │      content        │
├────────┴─────────────────────┤
│          footer              │
└──────────────────────────────┘

Empty Cells

grid-template-areas:
    "header header  header"
    "sidebar .      content"
    "footer  footer footer";

A period (.) creates an empty cell — that area has no content.

Responsive Areas

/* Desktop */
.container {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
}

/* Mobile */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "footer";
    }
}

On mobile, all items stack in a single column and the sidebar moves below the content — just by redefining the area template.

Key Takeaways

• grid-template-areas defines named regions that visually represent the layout
• Assign items to areas with grid-area: name
• Use . for empty cells
• Redefine areas in media queries for effortless responsive layouts