How Does CSS Grid Define Explicit Column Tracks?

The grid-template-columns property defines the explicit column tracks of a CSS Grid container by specifying the number, order, and dimensions of each vertical track. By declaring fixed measurements, flexible fraction units, or dynamic functions on the parent element, developers establish a predictable layout framework that child elements snap into, separating structure from document flow.

Understanding Explicit Tracks

Explicit tracks are the rows and columns intentionally declared in a stylesheet. When an element is set to display: grid, setting grid-template-columns tells the browser exactly how many column lanes to construct and how much space each lane should occupy. Any grid item placed within these boundaries follows this predefined layout, contrasting with implicit tracks, which the browser creates automatically to handle overflowing content.

Basic Syntax and Sizing Units

The value of grid-template-columns is a space-separated list of track sizing functions. Each entry represents a single column from left to right (or right to left in RTL writing modes).

.grid-container {
  display: grid;
  grid-template-columns: 200px 10rem 25%;
}

In this example, three explicit columns are created:

• The first column has a fixed width of 200 pixels.
• The second column occupies 10 rem units.
• The third column occupies 25 percent of the container’s available width.

Flexible Layouts with the fr Unit

CSS Grid introduces the flexible fraction unit (fr), which represents a fraction of the leftover space in the grid container after fixed elements and gaps are calculated.

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

Here, the available space is divided into four equal parts. The first and third columns each receive one-fourth of that space, while the middle column receives two-fourths (half the available space). Mixing fixed lengths with fractional units ensures fixed sidebars remain static while primary content regions resize fluidly:

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
}

Streamlining Declarations with Functions

To avoid repetitive declarations and build responsive patterns without media queries, CSS Grid provides specialized sizing functions.

The repeat() Function

When multiple columns share the same size, the repeat() notation reduces boilerplate:

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

Dynamic Sizing with minmax()

The minmax() function defines a closed size range, preventing columns from shrinking or expanding beyond set bounds:

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

Each column will stretch equally to fill space but will never shrink below 200 pixels.

Auto-Placement Keywords: auto-fill and auto-fit

Combining repeat() with auto-fill or auto-fit allows the grid container to calculate the number of explicit tracks dynamically based on available viewport width:

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

This creates as many 250px-minimum columns as can fit in the row, automatically adjusting the track count as the screen resizes.

Naming Grid Lines

grid-template-columns also allows custom names for the grid lines that border each track. Line names are declared inside square brackets before, between, or after track sizes:

.site-layout {
  display: grid;
  grid-template-columns: [sidebar-start] 260px [sidebar-end content-start] 1fr [content-end];
}

Child elements can then reference these custom line names directly using grid-column: sidebar-start / sidebar-end, making complex layouts self-documenting and easier to maintain.