CSS Grid Lines

CSS Grid Lines

CSS Grid lines form the boundaries between grid tracks and provide reference points for positioning and spanning grid items.

Grid lines are created automatically when columns and rows are defined. They can be referenced by number or name to control where individual grid items begin and end.

What are Grid Lines?

Grid lines are the horizontal and vertical boundaries that divide a grid into tracks. Column lines define the boundaries of column tracks, while row lines define the boundaries of row tracks.

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

A grid with three explicitly defined column tracks has four column lines. The first line appears at the start of the first column, two lines separate the columns, and the fourth line appears at the end of the final column.

Column Lines

Column lines run along the block axis and form the boundaries of the grid's column tracks.

.grid-container {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
}

This grid contains three explicit column tracks and therefore four explicit column lines.

Row Lines

Row lines run along the inline axis and form the boundaries of the grid's row tracks.

.grid-container {
  display: grid;
  grid-template-rows: 100px 150px;
}

Two explicitly defined row tracks create three explicit row lines.

Grid Line Numbering

Explicit grid lines are automatically numbered. Positive line numbers begin at the start side of the explicit grid and increase toward the end side.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Four explicit columns create five column lines numbered 1 through 5 in the forward direction.

Line numbering follows the writing mode and direction of the document. In a typical left-to-right horizontal writing mode, column line 1 begins at the left side of the explicit grid, while row line 1 begins at the top.

Placing Items with Grid Lines

The grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties can position a grid item using grid lines.

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

The item begins at column line 1 and ends at column line 3, so it spans two column tracks. It occupies the area between row lines 1 and 2.

The grid-column and grid-row shorthand properties provide a shorter way to write the same placement.

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Spanning Grid Tracks

The span keyword specifies how many grid tracks an item should span from its placement line.

.item {
  grid-column: 1 / span 2;
}

The item starts at column line 1 and spans two column tracks.

If automatic placement determines the starting position, span can also be used without an explicit starting line.

.item {
  grid-column: span 2;
}

The item spans two columns while the Grid auto-placement algorithm determines where it is placed.

Negative Grid Line Numbers

Explicit grid lines can also be referenced with negative numbers counted from the end edge of the explicit grid.

.item {
  grid-column: 1 / -1;
}

The value -1 refers to the final line of the explicit grid. This pattern allows an item to span from the first explicit column line to the last explicit column line.

Negative line numbers are especially useful when the number of explicit tracks may change but an item should continue spanning the complete explicit grid.

Named Grid Lines

Grid lines can be assigned names inside grid-template-columns or grid-template-rows.

.grid-container {
  display: grid;
  grid-template-columns: [sidebar-start] 220px [sidebar-end content-start] 1fr [content-end];
}

The names inside square brackets identify grid lines. More than one name can be assigned to the same line.

A grid item can then use those names instead of numeric line references.

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

Named lines can make complex layouts easier to understand because the placement declarations describe the purpose of each boundary.

Named Lines with repeat()

Line names can also appear inside a repeating track definition.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
}

Repeating a named line can create multiple grid lines with the same name. CSS Grid can distinguish repeated named lines by occurrence when they are referenced during placement.

For beginner layouts, unique names are often easier to read. Repeated line names become useful in larger repeating Grid structures.

Grid Lines and Writing Modes

Grid line numbering follows logical directions rather than being permanently tied to left, right, top, and bottom.

Column line numbering follows the inline direction, while row line numbering follows the block direction. Changing the writing mode or text direction can therefore change the physical side where line numbering begins.

This logical behavior allows CSS Grid to work with different languages and writing systems without requiring the layout model itself to change.

CSS Grid Lines Example

The following example creates four columns and three rows. The first item spans from column line 1 to line 3, while another item uses negative line numbering to span the full width of the explicit grid.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.item-2 {
  grid-column: 3 / 5;
}
.item-3 {
  grid-column: 1 / -1;
}

Open the example in the editor and change the line numbers to see how each item's position and span change.