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 display: grid;
3 grid-template-areas:
4 "header header"
5 "sidebar main"
6 "footer footer";
7}
8
9.header { grid-area: header; }
10.sidebar { grid-area: sidebar; }
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 */
Browser Support for CSS Grid
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Your first month is free
Managed WordPress hosting for faster sites.
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.