Understanding Named Grid Lines
Named grid lines extend the power of CSS Grid by letting you define meaningful names for the lines that separate tracks. Instead of referring to line numbers like "column line 3", you can use semantic names like "content-start" or "sidebar-end". This makes your CSS more readable and maintainable, especially in complex layouts.
The syntax might look unusual at first, but it follows a logical pattern. When defining tracks, you place line names in square brackets before the track size. For example: [content-start] 1fr [content-end] creates a 1fr track with named lines on either side. You can then position items using these names: grid-column: content-start / content-end.
Named lines become especially valuable when creating full-bleed layouts where some content should span the entire viewport width while other content stays constrained to a narrower measure. By naming lines like "full-start", "content-start", "content-end", and "full-end", you can precisely control which elements break out of the content area and which stay contained.
Consider the feature section above. The background image spans the full width, but the overlay text stays within a comfortable reading width. Named grid lines make this pattern trivial to implement and modify. You define your layout structure once with meaningful names, then position elements by referring to those semantic labels rather than counting grid lines.