Given `grid-template-areas: "header header" "sidebar main";` on a CSS grid container, what line names does the browser create automatically, and how can an item use them?

## Areas generate lines A named grid area is not just a label on a block of cells. Defining an area called `main` also names the four lines that bound it: `main-start` and `main-end` on the row axis, and `main-start` and `main-end` on the column axis. The same name appears on both axes, and there is no ambiguity because `grid-row` only ever resolves row lines and `grid-column` only ever resolves column lines. ```css .page { display: grid; grid-template-columns: 200px 1fr; grid-template-areas: "header header" "sidebar main"; } /* both of these place an item across the whole second row */ .a { grid-area: sidebar-start / sidebar-start / main-end / main-end; } .b { grid-column: sidebar-start / main-end; grid-row: main-start / main-end; } ``` That is why `grid-area: main` works at all: a bare `<custom-ident>` in a placement property first looks for a line named `<ident>-start` for a start edge, or `<ident>-end` for an end edge, and the area's generated lines are exactly those. `grid-area: main` sets all four longhands to `main`, and each resolves to its corresponding generated line. ## Why targeting the lines is useful Once the lines exist, an item is no longer limited to whole areas. A decorative background can run from `sidebar-start` to `main-end` while the content sits inside `main`. A modal overlay can stretch from `header-start` to `main-end` on the row axis. None of these placements involve a number, so a change to the number of tracks in the template does not invalidate them. This is the practical payoff: the container names its structure once, and items reference the structure by meaning rather than by index. It also composes with `span`. `grid-column: main-start / span 1` is legal, as is pairing a generated name with an explicit end line. ## The relationship reverses The rule works in both directions. If you explicitly name lines with the `-start` and `-end` convention when declaring tracks, those lines define an **implicit named area**: ```css .wrapper { display: grid; grid-template-columns: [full-start] 1rem [content-start] minmax(0, 60ch) [content-end] 1rem [full-end]; grid-template-rows: [content-start] auto [content-end]; } .prose { grid-area: content; } /* works: no grid-template-areas needed */ .bleed { grid-column: full-start / full-end; } ``` Here no `grid-template-areas` was written at all, yet `grid-area: content` places the item, because lines named `content-start` and `content-end` exist on both axes and together define the area. This is the mechanism behind the popular "full-bleed content column" wrapper pattern, and knowing *why* it works separates someone who copied the snippet from someone who can adapt it. ## Naming lines explicitly Line names are declared in square brackets inside the track templates, before, between or after track sizes. A line may carry several names: ```css grid-template-columns: [full-start main-start] 1fr [main-end full-end]; ``` And `repeat()` produces repeated names, which are then addressed with a name plus an index — `grid-column: col 3 / span 2` means "the third line named `col`". That indexed form is the only way to disambiguate repeated names, and it is why a name from `repeat()` is not a substitute for a semantic name. ## Precedence and collisions If a line named `main-start` is declared explicitly *and* an area called `main` exists, the explicitly named line participates in the same set of lines with that name, and a bare `main` in a start position resolves to the first such line in the grid. Deliberately mixing an explicit `-start`/`-end` naming scheme with an areas map that uses the same base name is therefore a maintenance hazard: it parses, it places something, and reasoning about which line won requires reading both declarations. Pick one source of names per grid. ## When this matters in practice Most layouts never need generated line names — `grid-area: main` is enough. They earn their keep in two situations: layout wrappers where a single content column must be pierced by full-width elements, and design-system grids where components are placed against named structural lines they did not define. In both, the container owns the vocabulary and the items speak it, which is precisely the property that makes a grid survive redesigns.