CSS Grid Template Areas
grid-template-areas is a property used on a grid container to define named grid areas. It provides a visual way to describe the layout of the grid, almost like drawing it with ASCII art in your CSS.
1. The Concept
Instead of counting line numbers (grid-column: 1 / 3), you assign names to grid items using the grid-area property, and then reference those names in the grid-template-areas property of the container.
2. Defining Areas on Items
First, give each direct child a name.
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }3. Creating the Template
Then, arrange these names in the container. Each string represents a row.
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}This creates a layout where:
- Row 1: Header spans both columns.
- Row 2: Sidebar is in the first column, Content in the second.
- Row 3: Footer spans both columns.
4. Rules and Syntax
- Rectangles Only: Areas must be rectangular. You cannot create 'L' or 'T' shapes.
- Empty Cells: Use a dot (
.) to signify an empty cell. - Repetition: Repeat the name to make an area span multiple columns.
- Rows: Each string in
grid-template-areasrepresents a row. Every string must have the same number of cells (names or dots).
5. Responsive Design
Grid Template Areas shine in responsive design because you can completely rearrange the layout just by redefining the grid-template-areas string in a media query, without touching the HTML or the individual item styles.
/* Mobile Layout */
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
/* Desktop Layout */
@media (min-width: 768px) {
.container {
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
}