CSS Grid Lines — Placing Items with Line Numbers and Names

CSS grid lines are the numbered dividers between tracks. Every grid has vertical (column) lines and horizontal (row) lines. You reference them by number or name to place items precisely.

Use the CSS Grid Generator to visualize grid line placement.

Grid line numbering

For a 3-column grid:

         1    2    3    4
         |    |    |    |
row 1 →  [ col1 ] [ col2 ] [ col3 ]
row 2 →  [ col1 ] [ col2 ] [ col3 ]
         |    |    |    |
         1    2    3    4

Lines are numbered 1 to n+1 (where n is the number of tracks). Negative numbers count from the end: -1 is the last line, -2 is second-to-last.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 4 column lines: 1, 2, 3, 4 */
  grid-template-rows: 100px 100px;       /* 3 row lines: 1, 2, 3 */
}

Placing items with grid-column and grid-row

/* grid-column: start-line / end-line */
/* grid-row: start-line / end-line */

.item {
  grid-column: 1 / 3;  /* from line 1 to line 3 (spans 2 columns) */
  grid-row: 1 / 2;     /* from line 1 to line 2 (spans 1 row) */
}

Spanning with span keyword

/* Equivalent ways to span 2 columns starting at line 1: */
grid-column: 1 / 3;
grid-column: 1 / span 2;
grid-column: span 2;      /* auto-placed, spans 2 columns */

/* Span to end of grid: */
grid-column: 2 / -1;  /* from line 2 to last line */
grid-column: 1 / -1;  /* spans entire width */

Practical placement examples

/* Full-width header: */
.header {
  grid-column: 1 / -1;
}

/* Full-height sidebar (3 rows): */
.sidebar {
  grid-row: 1 / 4;
}

/* Center item in a 4-column grid: */
.centered {
  grid-column: 2 / 4;  /* columns 2–3 */
}

/* Bottom-right quadrant of a 4×4 grid: */
.bottom-right {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

Named grid lines

You can name grid lines in grid-template-columns / grid-template-rows using [name] syntax:

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 240px
    [sidebar-end content-start] 1fr
    [content-end];
  
  grid-template-rows:
    [header-start] 64px
    [header-end main-start] 1fr
    [main-end footer-start] auto
    [footer-end];
}

Multiple names for the same line: [sidebar-end content-start].

Placing with named lines

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: main-start / footer-end;
}

.content {
  grid-column: content-start / content-end;
  grid-row: main-start / main-end;
}

.header {
  grid-column: sidebar-start / content-end;  /* full width */
  grid-row: header-start / header-end;
}

Named lines from grid-template-areas

When you use grid-template-areas, named lines are created automatically:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
}

This creates these named lines automatically:

• header-start, header-end
• sidebar-start, sidebar-end
• main-start, main-end

Shorthand properties

/* grid-column shorthand: */
grid-column: 2 / 4;
/* same as: */
grid-column-start: 2;
grid-column-end: 4;

/* grid-row shorthand: */
grid-row: 1 / 3;
/* same as: */
grid-row-start: 1;
grid-row-end: 3;

/* Even shorter: grid area (row-start / col-start / row-end / col-end) */
.item {
  grid-area: 1 / 2 / 3 / 4;  /* rows 1–3, columns 2–4 */
}

Overlapping items

Multiple items can occupy the same grid cells — they stack with z-index:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.background-item {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 0;
}

.overlay {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  z-index: 1;
}

Common layout patterns

Holy grail layout with line numbers

.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 50px;
}

.header  { grid-column: 1 / 4; grid-row: 1; }
.nav     { grid-column: 1;     grid-row: 2; }
.main    { grid-column: 2;     grid-row: 2; }
.aside   { grid-column: 3;     grid-row: 2; }
.footer  { grid-column: 1 / 4; grid-row: 3; }

Tile spanning in a photo grid

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 0.5rem;
}

.photo-wide  { grid-column: span 2; }
.photo-tall  { grid-row: span 2; }
.photo-large { grid-column: span 2; grid-row: span 2; }

Related tools

• CSS Grid Generator — generate and visualize grid layouts
• CSS Grid Areas — named grid areas
• CSS Grid Auto Placement — auto-flow algorithm