Named Grid Lines
Grid lines already have implicit numbers — line 1, line 2, and so on — but for anything beyond a simple layout, counting lines by number is fragile and hard to read. CSS lets you attach one or more names to any line directly inside grid-template-columns or grid-template-rows, and then place items using those names instead of numbers.
Naming Lines with Square Brackets
Put a name in square brackets at the position of the line you want to name, right inside the track list:
.page {
display: grid;
grid-template-columns:
[full-start] 1fr
[content-start] minmax(0, 1200px)
[content-end] 1fr
[full-end];
grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end];
}A single position can hold multiple names — [header-end main-start] above names the same line twice, once for each track it borders. Lines can also share the same name if it's used consistently; CSS will pick the matching occurrence based on context.
Placing Items by Name
Once lines are named, use those names anywhere you'd normally put a line number in grid-column, grid-row, or the longhand -start/-end properties:
.full-bleed-banner {
grid-column: full-start / full-end;
}
.article-body {
grid-column: content-start / content-end;
}
.site-header {
grid-row: header-start / header-end;
grid-column: full-start / full-end;
}Why This Reads Better Than Numbers
On a grid with a handful of columns, numeric lines are fine. On a real layout — a full-bleed hero, a constrained content column, a sidebar, a gutter — numeric line-counting turns into guesswork the moment someone inserts a new track. Named lines describe intent directly in the CSS: content-start tells the next reader what that line is for, while 4 tells them nothing.
Named lines survive refactors better — inserting a new track shifts numeric line indexes everywhere, but named references keep working as long as the name stays put.
Names make the grid self-documenting:
grid-column: sidebar-start / sidebar-endreads like plain English.You can still mix named and numeric references in the same project; there's no need to convert everything at once.
/* Numbered line syntax auto-generates a name too: */
.grid {
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
/* Because the name repeats, reference a specific occurrence
with the nth-of-name syntax: */
}
.item {
grid-column: col-start 2 / col-end 2; /* the 2nd "col-start"/"col-end" pair */
}