CSS Grid Tracks

CSS Grid Tracks

A CSS Grid track is the space between two adjacent grid lines. Column tracks form the columns of a grid, while row tracks form its rows.

Grid tracks can use fixed, flexible, or content-based sizes. Understanding how tracks are sized is an important part of creating Grid layouts that adapt to their content and available space.

What is a Grid Track?

A grid track is the space between two adjacent grid lines. Tracks extend across the grid and form either columns or rows.

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

This declaration creates three column tracks. The first track is 200 pixels wide, and the remaining two tracks use flexible sizing.

Grid lines form the boundaries of these tracks. Three column tracks therefore have four column lines.

Column and Row Tracks

Column tracks are defined along the grid's inline axis, while row tracks are defined along its block axis.

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

This example defines three column tracks and two row tracks.

Fixed Track Sizes

A track can use a fixed length such as pixels.

.grid-container {
  display: grid;
  grid-template-columns: 200px 300px 150px;
}

Each column has a specified track size that does not automatically divide the available container space.

Fixed tracks are useful when a layout requires predictable dimensions, but several fixed tracks can overflow when the grid container becomes narrower than their combined sizes.

Flexible Tracks

The fr unit creates flexible Grid tracks by assigning fractions of the available space.

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

Each column receives an equal share of the available flexible space.

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

In this example, the second track has a flex factor of 2 while the first and third tracks each have a flex factor of 1. The flexible portion of the available space is distributed according to these factors after other sizing requirements are considered.

Content-Sized Tracks

Grid tracks can also be sized according to their content.

.grid-container {
  display: grid;
  grid-template-columns: max-content 1fr;
}

The max-content keyword sizes the first track based on the maximum intrinsic size of its content, subject to Grid sizing rules and other constraints.

.grid-container {
  display: grid;
  grid-template-columns: min-content 1fr;
}

The min-content keyword uses the minimum intrinsic size of the content, which can produce a narrower track where the content can wrap or otherwise become smaller.

The auto keyword can also provide content-sensitive track sizing.

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

Track Sizing with minmax()

The minmax() function defines a track size with a minimum and maximum.

.grid-container {
  display: grid;
  grid-template-columns: 200px minmax(200px, 1fr);
}

The second track has a minimum size of 200 pixels and can grow to use flexible space.

A common responsive Grid pattern combines minmax() with repeat().

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

This allows the number and size of tracks to adapt to the available space. Later tutorials cover minmax(), auto-fit, and auto-fill in detail.

Mixing Track Sizes

A single Grid layout can combine different track-sizing methods.

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

The first track has a fixed size, while the other two tracks use flexible sizing.

Content-based sizing can also be combined with flexible tracks.

.grid-container {
  display: grid;
  grid-template-columns: max-content 1fr;
}

This can be useful when one column should fit its content while another uses the remaining space.

Explicit Tracks

Tracks defined by the grid template form the explicit grid.

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

This explicitly defines three column tracks and two row tracks.

The explicit grid provides the planned structure of the layout and can later be used with grid lines, named areas, and item placement.

Implicit Tracks

Grid can create additional tracks when grid items require rows or columns outside the explicit grid.

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

The columns are explicitly defined. Additional rows created by auto-placement are implicit tracks, and grid-auto-rows gives those rows a size of 100 pixels.

Implicit columns can be sized with grid-auto-columns.

.grid-container {
  grid-auto-columns: 150px;
}

Gaps Between Tracks

Grid gaps create gutters between adjacent tracks.

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

The gap occupies space between the tracks. It does not create an additional Grid track and does not add the specified gap around the outside edges of the grid.

.grid-container {
  row-gap: 20px;
  column-gap: 10px;
}

The row-gap and column-gap properties allow the two directions to use different spacing.

Tracks and Content

Grid track sizing can be influenced by the content inside grid items. Flexible tracks do not always behave like simple percentages because intrinsic content sizes and minimum sizing constraints can affect the final result.

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

Although the tracks are intended to share flexible space equally, long or unbreakable content can affect how small a track is allowed to become.

When a track must be allowed to shrink below its content-based minimum, a pattern such as minmax(0, 1fr) can be useful.

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

This explicitly gives each flexible track a minimum of zero, allowing it to shrink further when the layout requires it.

CSS Grid Tracks Example

The following example compares fixed, flexible, and content-sized tracks. Open the example in the editor and change the track values to see how each sizing method responds.

.fixed-tracks {
  grid-template-columns: 120px 180px 120px;
}
.flexible-tracks {
  grid-template-columns: 1fr 2fr 1fr;
}
.mixed-tracks {
  grid-template-columns: max-content 1fr 120px;
}