Skip to main content

CSS Grid Lines – What Is a CSS Grid Line?

CSS grid lines are the lines browsers create on a grid container when you define the grid-template-columns or grid-template-rows property.

Illustration of CSS grid lines

info

We call the space between any two grid lines a grid track.

The two types of CSS grid lines are:

  • Grid column lines
  • Grid row lines
Buy your CSS Flexbox Explained Visually book on Amazon

What Is a Grid Column Line?

Grid column lines are the lines browsers create on a grid container's column (block) axis when you define the grid-template-columns property.

Illustration of grid column lines in CSS Grid

The numbering of the grid column lines starts from number one (1) at the grid container's column-start edge.

Therefore, suppose your writing language script is horizontal left-to-right—like English. In that case, your grid column line 1 will be at the top-left of the grid container.

However, suppose your writing language script is horizontal right-to-left—like Arabic. In that case, your grid column line 1 will be at the top-right of the grid container.

note

Browsers use negative numbers to indicate end lines. For instance, the last column line will get a -1 tag, while the third from the last line gets a -3 label.

What Is a Grid Row Line?

Grid row lines are the lines browsers create on a grid container's row (inline) axis when you define the grid-template-rows property.

Illustration of grid row lines in CSS Grid

The numbering of the grid row lines starts from number one (1) at the grid container's row-start edge.

note

Browsers use negative numbers to indicate end lines. For instance, the last row line will get a -1 tag, while the third from the last line gets a -3 label.

info

Follow Firefox's CSS Grid Inspector guide to learn how to examine grid lines on your browser's DevTool.

How to Name Grid Lines

Suppose you wish to name some (or all) of your grid lines. In that case, specify the name inside square brackets ([]) while defining the number and widths of your grid container's columns or rows.

Example: How to name a grid container's column lines

grid-template-columns: [first-line] 20px [second-line] 50px [last-line];

Here's what we did in the CSS snippet above:

  • We defined a two-columns grid container with widths of 20px and 50px respectively.
  • We used the [line-name] syntax to name the grid container's lines.

Therefore, instead of line numbers, you can use the specified names to place grid items like so:

section {
display: grid;
grid-template-columns: 1fr 1fr [third-line] 1fr;
background-color: orange;
margin: 50px;
min-height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}

.grid-item1 {
grid-column-start: third-line;
}

Try it on StackBlitz

The snippet above used the third-line value to start grid-item1 at the grid container's third column line.

Note that you can specify multiple names for a single line.

Example: How to specify multiple names for a single grid line

To specify multiple names for a single grid line, define the names inside a square bracket as follows:

section {
display: grid;
grid-template-columns: 1fr [second-line ads-end] 1fr [third-line last-column-start-line] 1fr;
background-color: orange;
margin: 50px;
min-height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}

.grid-item1 {
grid-column-start: last-column-start-line;
}

.grid-item5 {
grid-column-start: ads-end;
}

Try it on StackBlitz

The snippet above used multiple names for the second and third column grid lines.

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

This article discussed what a CSS grid line is. We also discussed naming grid lines.