CSS Generators·4 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 or flexbox choice down to a single question.

Open the free CSS Grid Generator 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.

Draw the layout in text with grid-template-areas

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 main argument for template areas over numbered line placement.

What one fr of the grid actually 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. Short, role-based names read like a floor plan months later, and grid-area: filters tells the next developer exactly what lives there.

Prototype the track math before writing the template. Set the column and row counts in the CSS Grid Generator, try 1fr against minmax(0,1fr) in the size fields, and move the separate column-gap and row-gap sliders to see how gaps change the leftover pot. Structure first, labels second.

From dragged cells to named areas

By default the generator places items by line numbers. Drag across the top row of a 4 by 3 grid and it writes grid-column: 1 / 5 with grid-row: 1 / 2; drag down the first column of rows 2 and 3 and you get grid-column: 1 / 2 with grid-row: 2 / 4. Those rules work as they are, and the HTML tab gives matching markup.

Translating them into a template is mechanical: each placed item becomes a name repeated across the cells it covers, so the header above turns into "header header header header" on the first row. The generator does this for you: rename the items, switch on Output grid-template-areas, and give each column its own size for a mixed scaffold like 220px 1fr 280px. The Dashboard template loads that layout ready made.

Choosing grid or flexbox 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.