What it is and why to use it
Grid line names label boundaries between tracks. Items can refer to those names instead of hard-coded line numbers, making a layout easier to read and adjust. Names describe lines, while grid-template-areas names describe areas spanning cells; the two mechanisms are related but distinct.
Common mistakes and limitations
A line can have more than one name, and repeated names can require an occurrence number. Do not assume naming lines changes reading order or provides semantic HTML. Keep the document understandable without the visual grid.
Try the example
The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.
HTML used by this example
<div class="layout"><div class="banner">Full-width heading</div><div class="content">Right column</div></div>Syntax
grid-template-columns: [start] 1fr [middle] 1fr [end];Examples
Named Grid Lines
Run the CSS against the supplied HTML, then experiment with the values.
.layout { display: grid; grid-template-columns: [start] 1fr [middle] 1fr [end]; gap: .5rem; }
.banner { grid-column: start / end; background: #bfdbfe; padding: 1rem; }
.content { grid-column: middle / end; background: #e0e7ff; padding: 1rem; }- start and end bound both columns, so the banner spans the whole row.
- middle marks the boundary between columns; content starts there and occupies the right column.
- The names make each placement explain its purpose. Adjusting the track widths does not require changing these item declarations.
HTML used by this example
<div class="demo"><div class="layout"><div class="banner">Full-width heading</div><div class="content">Right column</div></div></div>Best practices
- A line can have more than one name, and repeated names can require an occurrence number. Do not assume naming lines changes reading order or provides semantic HTML. Keep the document understandable without the visual grid.
- Inspect the relevant browser reference and test the browsers used by your audience.
Runtime & versions
Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
CSS specifications (modules)