Grid template areas in CSS - Browser Rendering Trace

Render Flow - Grid template areas

Parse CSS Grid Container

↓

Identify grid-template-areas

↓

Create named grid areas

↓

Assign grid items to areas

↓

Calculate grid tracks

↓

Place items according to areas

↓

Paint grid and items

↓

Composite final layout

The browser reads the grid container's CSS, creates named areas from the template, assigns items to these areas, calculates the grid layout, and then paints the items in their correct positions.

Render Steps - 4 Steps

Code Added:display: grid;

Before

[grid-container]
  [header]
  [sidebar]
  [content]
  [footer]

→

After

[grid-container: grid]
  [header]
  [sidebar]
  [content]
  [footer]

Turning the container into a grid enables grid layout but items still stack by default.

🔧 Browser Action:Creates grid formatting context, triggers reflow

Code Sample

A grid layout with named areas places header spanning two columns on top, sidebar and content side by side in the middle, and footer spanning two columns at the bottom.

CSS

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Render Quiz - 3 Questions

After applying step 2, what does the grid layout visually show?

A A single column stack of all items

B A 3-row by 2-column grid with named areas arranged as header spanning top row, sidebar and content side by side in middle, footer spanning bottom row

C A 2-row by 3-column grid with header on left

D Items overlapping each other in one cell

Common Confusions - 2 Topics

Why do my grid items not appear in the right places even though I set grid-template-areas?

You must assign the matching grid-area name to each grid item. Without grid-area on the children, they won't move to the named areas defined.

💡 Always pair grid-template-areas with grid-area on children to see the layout from step 4.

Why does the grid have empty space or unexpected gaps?

If your grid-template-areas strings don't cover all columns or rows fully, or if you have gaps set, space appears. Also, missing area names or dots (.) create empty cells.

💡 Use dots (.) in grid-template-areas to mark empty cells and check your area strings cover all columns.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	grid	N/A	Creates grid container for layout	Enable grid layout
grid-template-areas	"header header" "sidebar content" "footer footer"	2D grid	Defines named areas for grid placement	Semantic layout naming
grid-template-columns	1fr 3fr	Horizontal	Sets column widths proportionally	Control column sizes
grid-template-rows	auto 1fr auto	Vertical	Sets row heights with flexible middle row	Control row sizes
grid-area	header, sidebar, content, footer	N/A	Assigns grid items to named areas	Place items in grid

Concept Snapshot

Grid template areas let you name parts of a grid layout. Use grid-template-areas on the container to define the layout shape. Assign grid-area names to children to place them in those areas. Set grid-template-columns and rows to control sizes. This creates clear, semantic, and easy-to-read grid layouts.