How to Use CSS Grid Template Areas (2026)
CSS Grid template areas let you define page layouts by drawing them with names rather than calculating column and row positions. Instead of counting grid lines and memorizing placement syntax, you write a visual map of your layout: header spans the top, sidebar sits left, content fills the middle. This approach is more intuitive, more readable, and easier to restructure with media queries.
- Master CSS Grid template areas for intuitive page layouts.
- Covers grid template basics.
- Covers named template areas.
- Covers responsive grid patterns.
- Covers common layout presets.
Grid Template Basics
Every CSS Grid starts with two properties: grid-template-columns defines how many columns and their widths, and grid-template-rows defines how many rows and their heights. The fr unit (fraction) is the grid-specific unit that distributes remaining space proportionally.
grid-template-columns: 200px 1fr 200px creates three columns: a fixed 200px sidebar, a flexible middle column that takes all remaining space, and another fixed 200px sidebar. The fr unit is what makes Grid layouts fluid and responsive without media queries.
gap (formerly grid-gap) sets the spacing between cells. A single value like gap: 16px applies equally to rows and columns. Two values like gap: 16px 24px set row gap and column gap separately.
Named Template Areas
grid-template-areas is the feature that makes Grid layouts readable. You define a visual map using quoted strings where each string represents a row and each word represents a cell. Repeating a name spans that area across multiple cells.
-webkit-backdrop-filter alongside backdrop-filter for Safari support. Without the prefix, the effect is invisible to roughly 25% of mobile users.Example: grid-template-areas: "header header header" "nav main aside" "footer footer footer" creates a classic three-column layout where the header and footer span all three columns, and the middle row has three distinct areas.
To place an element in a named area, use grid-area: header on the element. No row/column number calculations needed. If you restructure the template, the elements follow their names automatically.
Use a period (.) for empty cells: grid-template-areas: "logo . nav" creates a row with empty space in the middle. This is cleaner than creating invisible spacer elements.
Responsive Grid Patterns
The power of template areas shows in responsive design. At mobile widths, stack everything vertically. At tablet, introduce a two-column layout. At desktop, use the full grid. Each breakpoint is just a different template-areas string.
backdrop-filter inside a position: fixed element can cause severe scroll performance issues. Test thoroughly on real iOS devices.A common pattern: use a single-column grid-template-areas on mobile ("header" "nav" "main" "footer"), switch to two columns at 768px, and three columns at 1024px. The HTML stays identical — only the CSS template changes.
Combine with auto-fit and minmax() for grids that reflow automatically: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates columns that wrap based on available space, no media queries needed.
Common Layout Presets
Holy Grail: the classic layout with header, footer, main content, and two sidebars. Use grid-template-columns: 200px 1fr 200px with three template rows. This pattern has been a CSS challenge for decades — Grid solves it in three lines.
Dashboard: a fixed sidebar with a grid of cards. The sidebar uses a fixed column width while the card area uses repeat(auto-fill, minmax(300px, 1fr)) for a responsive card grid.
Blog layout: a wide content column with a narrower sidebar. grid-template-columns: 1fr 300px gives the content area all remaining space while the sidebar stays fixed at 300px.