Grid lines form the boundaries of a CSS grid’s rows and columns. The space between adjacent lines is a track; an item’s grid area is bounded by two vertical and two horizontal lines. The browser numbers these lines, so `grid-column: 1 / 3` places an item between vertical lines 1 and 3. section 5.2 section 5.2.1
Line numbers can become hard to track as a grid grows. Give a line an author-defined name by putting it in square brackets in a track definition, then use that name in `grid-column` or `grid-row`. section 5.3.1
Place an item between named lines
A two-column template can declare `grid-template-columns: [start] 2fr [center] 1fr [end];`. Then `grid-column: start / center;` places an item in the first column. The names identify boundaries; the `2fr` and `1fr` values size the tracks between them. section 5.3.1
A line may have more than one name: `[left-end right-start]` marks both the end of one column and the start of another. Paired `-start` and `-end` names also let `grid-column: left` span the area between `left-start` and `left-end`. Names can repeat, too: with `repeat(4, [row] auto)`, `grid-row: row 3 / span 2` starts at the third line named `row` and spans two tracks. section 5.3.1
Listing 5.6 Grid layout using named grid lines
.container {
display: grid;
grid-template-columns: #1
[left-start] 2fr #1
[left-end right-start] 1fr #1
[right-end]; #1
grid-template-rows: repeat(4, [row] auto); #2
gap: var(--gap-size);
max-inline-size: 1080px;
margin-inline: auto;
}
header,
nav {
grid-column: left-start / right-end;
grid-row: span 1;
}
.main {
grid-column: left; #3
grid-row: row 3 / span 2; #4
}
.sidebar-top {
grid-column: right; #5
grid-row: 3 / 4;
}
.sidebar-bottom {
grid-column: right; #5
grid-row: 4 / 5;
}
The complete page layout uses named column boundaries for a full-width header, a main column, and a sidebar, while repeating a row-line name for vertical placement. section 5.3.1
Named lines are an alternative to numbered lines and named grid areas, not a requirement. Choose the placement syntax that makes a particular layout easiest to read. In a subgrid, line names can be inherited from the parent or supplied alongside `subgrid`. section 5.3 section 5.5.1
