Named Grid Lines

Instead of using numbers, you can give grid lines custom names using square bracket notation. Named lines make placement more semantic and your CSS more readable.

[name]grid-template-columnsgrid-template-rowsgrid-columngrid-row

1. Defining Named Lines

Place names inside square brackets before or after a track size. You can have multiple names for the same line. Names don't replace numbers — both work.

Live Demo

start → middle

middle → end

full width (start → end)

CSS

.container {
  grid-template-columns:
    [start] 1fr
    [middle] 1fr
    [end];
    /* line 1 = start, line 2 = middle, line 3 = end */
}
.a { grid-column: start / middle; }
.b { grid-column: middle / end;  }
.c { grid-column: start / end;   } /* full width */

💡 Named lines are especially useful in component systems where you want placement to be independent of the exact number of columns.

2. Multiple Names per Line

A single line can have multiple names. This lets you reference the same line by different meaningful names in different contexts.

Live Demo

sidebar

content

spans both areas

CSS

.container {
  grid-template-columns:
    [sidebar-start content-end] 200px
    [sidebar-end content-start] 1fr;
}
.sidebar { grid-column: sidebar-start / sidebar-end; }
.content  { grid-column: content-start / -1; }

3. Named Row Lines

Name row lines just like column lines. This is especially powerful for complex page layouts where you want semantic names for both axes.

Live Demo

header (full width)

nav

main

footer (full width)

CSS

.container {
  grid-template-columns:
    [nav-start] 150px
    [nav-end main-start] 1fr
    [main-end];
  grid-template-rows:
    [header-start] 50px [header-end body-start]
    1fr
    [body-end footer-start] 40px [footer-end];
}
.header { grid-column: nav-start / main-end;
           grid-row: header-start / header-end; }
.nav    { grid-column: nav-start / nav-end;
           grid-row: body-start / body-end; }

4. -start / -end Naming Convention & grid-area

If you name lines with the pattern "name-start" and "name-end", you can use those names as a grid-area value! This works for both row and column lines.

Live Demo

header

sidebar

content

CSS

.container {
  grid-template-columns:
    [sidebar-start] 150px
    [sidebar-end content-start] 1fr
    [content-end];
  grid-template-rows:
    [header-start] 50px [header-end main-start]
    1fr [main-end];
}
/* grid-area uses the *-start/*-end names! */
.header  { grid-area: header;  }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

💡 The -start/-end naming convention is a powerful bridge between named lines and grid-area. It gives you the readability of template areas with the flexibility of named lines.

5. repeat() with Named Lines

Named lines work inside repeat(). However, repeated names get an index suffix: [col-start] becomes [col-start 1], [col-start 2], etc.

Live Demo

col 1

cols 2–3

all cols

CSS

.container {
  /* creates: [col-start] 1fr [col-end] × 3 */
  grid-template-columns:
    repeat(3, [col-start] 1fr [col-end]);
}
/* Reference with index: */
.a { grid-column: col-start 1 / col-end 1; } /* col 1 */
.b { grid-column: col-start 2 / col-end 3; } /* cols 2-3 */
.c { grid-column: col-start 1 / col-end 3; } /* all cols */