Grid template areas allow you to design layouts using simple names instead of grid line numbers.
You define layout sections like header, sidebar, content, and footer using readable text patterns.
This makes your CSS easier to understand and maintain, especially for large layouts.
Here, the entire page layout is created using named areas.
Each section is placed in the grid using grid-area, making the layout very easy to read.
This approach is perfect for building dashboards and blog layouts.
You can change the whole structure just by editing the template areas.
This layout shows how grid template areas help structure complex pages clearly.
Instead of counting lines, you simply assign sections by name.
Rules for using grid template areas
- Each row must have the same number of columns
- Use the same area name to make sections span
- Use a dot to leave empty spaces
Dots in grid template areas represent empty cells.
This gives you full control over layout shape.
Practice task
Create a grid layout using template areas:
- Add areas for header, sidebar, content, and footer
- Rearrange the layout by changing only the template
- Try creating an empty space using a dot
Next lesson
In the next page, you will learn about auto-fit and auto-fill for responsive grids.