🎯 CSS grid-template-areas Property

grid-template-areas is a CSS Grid property used to define named layout regions inside a grid container. It allows you to design layouts like a visual map, making complex structures easier to understand and manage.

With this property, you can assign names to different sections of a grid and then place elements into those named areas using grid-area.

The property allows you to visually structure your layout by naming grid regions instead of working only with row and column numbers.

• Defines named regions inside a grid
• Improves readability of complex layouts
• Works together with grid-area property
• Makes layout management easier and cleaner

No named grid areas are defined. The grid behaves normally using rows and columns.

.container {
    grid-template-areas: none;
}
                

You can define named areas using strings inside quotation marks.

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}
                

Here, each word represents a named grid area.

The following example shows a complete layout structure using grid-template-areas and grid-area together.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

header {
    grid-area: header;
}

aside {
    grid-area: sidebar;
}

main {
    grid-area: content;
}

footer {
    grid-area: footer;
}
                

This structure creates a clear page layout with header, sidebar, content, and footer sections.

-------------------------
|        HEADER         |
-------------------------
| SIDEBAR |  CONTENT    |
-------------------------
|        FOOTER         |
-------------------------
                

The grid-template-areas property is extremely useful for building structured and readable layouts. It simplifies complex grid systems by turning them into visual, named sections.

• Makes layouts more readable and visual
• Simplifies complex grid structures
• Works perfectly with grid-area
• Improves maintainability of CSS code
• Ideal for modern responsive layouts