Tutorials › CSS Mastery › CSS Grid Areas

CSS Grid Areas

6 min read Quiz at the end

grid-template-areas defines named layout zones. Place items by name with grid-area. Redefine the template areas in a media query to completely rearrange the layout for different screen sizes very clearly.

Grid Template Areas

.layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 64px 1fr 48px;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
}

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

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }
    .sidebar { display: none; }
}

← CSS Print Styles Next: Glassmorphism →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Grid template areas use:

💡 grid-template-areas uses strings of area names to create a visual layout map.

2. A period (.) in grid-template-areas means:

💡 A . (period) in grid-template-areas represents an empty cell.

3. How does a grid item use a named area?

💡 grid-area: name places the item in the matching template area.

4. Can grid-template-areas span multiple rows?

💡 Repeating an area name in multiple rows of grid-template-areas spans that area across those rows.

5. What is the main benefit of grid-template-areas?

💡 Named grid areas make the layout intent clear and readable directly in the CSS.

Quick Access

CSS Grid Areas

Grid Template Areas

Test your understanding before moving on