Web Analytics
☕ Coffee 𝕏 Follow
0%

Grid Template Areas

Intermediate ~9 min read

What are Grid Template Areas?

Grid template areas let you name sections of your grid and create layouts visually in CSS. It's incredibly readable and semantic!

Basic Layout with Areas

Use grid-template-areas to define named regions, then assign items to areas with grid-area.

HTML
CSS
JS

Classic Website Layout

Create a classic header-sidebar-content-footer layout with named areas. Notice how readable the CSS is!

HTML
CSS
JS

Empty Cells with Dots

Use a dot . to create empty cells in your grid template.

HTML
CSS
JS

Responsive Grid Areas

Change grid-template-areas with media queries for responsive layouts. Desktop: sidebar on left. Mobile: sidebar below content.

HTML
CSS
JS
Pro Tip: Grid template areas make your CSS self-documenting. You can literally see the layout structure in the CSS!

Summary

  • grid-template-areas - Define named grid regions
  • grid-area - Assign element to named area
  • Use quotes for each row in template-areas
  • Repeat area name to span multiple cells
  • Use . for empty cells
  • Perfect for semantic, readable layouts

Quick Quiz

What character creates an empty cell in grid-template-areas?

A
Underscore (_)
B
Dot (.)
C
Hash (#)
D
Asterisk (*)
Previous Grid Basics
Next Grid Advanced