Naming grid areas without line numbers
The old way was floats with clearfix and margin math, or grid with line numbers. Template areas let you name regions like header, sidebar, main, and drop them in place.
2.sidebar { grid-column: 1; grid-row: 2; }
3.main { grid-column: 2; grid-row: 2; }
4.footer { grid-column: 1 / -1; grid-row: 3; }
5/* Line numbers, hard to read */
2 display: grid;
3 grid-template-areas: "header header" "sidebar main" "footer footer";
4}
5
6.header { grid-area: header; }
7.sidebar { grid-area: sidebar; }
Readable layout
The grid structure is visible at a glance. No counting lines or guessing spans.
One place to change
Add or remove a row in the template string. Child items use grid-area names only.
No line math
No grid-column: 1 / 3 or grid-row: 2. Name the area and the browser places it.
How it works
The old approach was either float-based layouts with clearfix and tricky margins, or grid with explicit grid-column and grid-row line numbers. Line numbers work but are hard to read and refactor.
The modern approach is grid-template-areas: you write a string that looks like your layout. Each quoted row lists area names; repeat a name to span columns. Then on each child you set grid-area: header (or whatever name). The layout is defined in one place and reads like a simple map.