CSS Generators·3 min read

CSS Grid Template Areas: Page Scaffolds With fr Units

Page scaffolds used to mean nested wrappers, float clears, and hope. With css grid template areas you sketch the layout as text right inside the stylesheet: name each region, draw the map, and the browser places everything where the map says. This guide works through template areas and fr units, the two grid features that turn a wall of divs into something you can read six months later. You'll build a three-column scaffold with real numbers, learn exactly what one fraction measures, and get the grid vs flexbox choice down to a single question.

Open the tool All insights

The layouts that made CSS Grid necessary

Two dimensions, one property.

Picture an admin dashboard: a header across the top, navigation down the left, main content in the middle, a stats rail on the right, and a footer spanning the bottom. Five regions, aligned on both axes at once. Before grid, that meant absolute positioning, float arithmetic, or a framework's 12-column div soup.

Grid treats the whole arrangement as one declaration set on one container. The children don't need to know anything about the layout; they just get assigned to named regions. When the design changes, you edit the map, not the markup.

CSS grid template areas: draw the layout in text

ASCII art that compiles.

Here's that dashboard as a real three-column template: display: grid; grid-template-columns: 220px 1fr 280px; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";.

Each quoted string is a row, each word is a cell, and repeating a name makes a region span cells. The header repeats across all three columns of the first row, so it spans the full width. Then each child claims its spot with one line: grid-area: header; grid-area: sidebar; and so on. Reordering the page for a redesign means editing three strings while the HTML stays untouched. That readability is the entire selling point of the template-areas approach over numbered line placement.

Fr units explained: what one fraction of the grid measures

An fr unit is a share of the space left over after every fixed track and gap has been paid. In the scaffold above, suppose the container is 1200px wide with two 24px gaps. The browser first reserves 220px for the sidebar, 280px for the aside, and 48px for gaps, leaving 652px. The middle column's 1fr collects all of it.

This is what makes fr different from percent. Three 33.3% columns plus gaps overflow the container, because percentages don't know gaps exist. Three 1fr columns never overflow; the leftover pot is divided after the gaps are subtracted. Want the main column twice as wide as a flexible aside? Write 2fr 1fr and the ratio holds at every viewport width.

Grid template mistakes that leave blank tracks

Template areas are strict, and the browser's failure mode is silent: an invalid template gets ignored entirely. Watch for these:

Rows with mismatched cell counts. Every quoted string must contain the same number of names, or the whole template is thrown out.
Non-rectangular regions. A name may only describe a rectangle; an L-shaped "main" area invalidates the template.
Plain 1fr where content can blow out. A track refuses to shrink below its content's minimum size, so a long URL widens the column. minmax(0, 1fr) is the fix.
Forgetting the implicit grid. Items beyond your defined cells spawn auto-sized rows; set grid-auto-rows if extras are possible.
Using a period placeholder inconsistently. A dot marks an intentionally empty cell; leaving the word out entirely breaks the cell count instead.

Grid habits that keep templates readable

Name areas after roles, not positions. A region called sidebar survives a redesign that moves it to the right; a region called left-col becomes a lie. Your future self reads grid-area: filters and knows exactly what lives there.

Prototype the track math before writing the template. Sketch the column and row structure in the CSS Grid Generator, try 1fr against minmax(0,1fr) in the size fields, watch how the gap slider changes the leftover pot, and only then commit names to the map. Structure first, labels second.

Making the grid vs flexbox choice per component

One question settles it: does this component need rows and columns to agree with each other? A page scaffold, a photo wall, a pricing table: yes, that's grid. A tag list, a button row, a nav bar where content should dictate the sizing: no, one axis is plenty.

The two aren't rivals so much as layers. It's normal for a grid area called header to be a flex container inside. When you're working on that inner, single-axis piece, prototype it in the CSS Flexbox Generator, where justify-content and align-items are dropdowns you can flip until the row looks right.