How to Use CSS Grid Template Areas
CSS Grid's grid-template-areas property lets you name zones of your layout and assign elements to them — making complex layouts readable and maintainable.
What is grid-template-areas?
It lets you define a visual map of your layout using named strings. Each quoted string is a row; each word is a column cell. Use . for empty cells.
How do I assign an element to an area?
In your element's CSS, write grid-area: header; — it'll snap to the named zone automatically. No row/column numbers needed.
What are the fr units?
1fr means "one fraction of available space." 2fr 1fr makes the first column twice as wide as the second. Combine with px and auto.
Can I use this with Tailwind / Bootstrap?
Yes — copy the CSS output into a custom class or use Tailwind's arbitrary values like grid-areas-['header_header_sidebar'] with the plugin.
Why named areas over line numbers?
Named areas survive layout changes — move a sidebar from left to right by editing one string, not 6 numeric values. Way less error-prone.
What does a valid area map look like?
Each named area must form a rectangle — no L-shapes. Every row must have the same column count. Empty cells use . (generated automatically).