CSS grid-template-columns Property: Define Columns in a CSS Grid

Defines the number and widths of columns in a grid. You can set fixed sizes, percentages, or use the fr unit to fill available space.

Quick example

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
} /* one fixed column, two flexible ones */

Syntax

grid-template-columns: <track-list> | none | subgrid

<length>

Fixed size: 200px, 10rem, 50%. The column is exactly that wide.

<flex> (fr unit)

1fr takes one share of remaining space. 1fr 2fr creates two columns where the second is twice as wide as the first.

auto

Column sizes to fit its content.

minmax(min, max)

Column is at least min wide and at most max. Common pattern: minmax(0, 1fr) for columns that can shrink below content size.

repeat(count, track)

Shorthand. repeat(3, 1fr) is the same as 1fr 1fr 1fr. Combine with auto-fit or auto-fill for responsive grids.

subgrid

Nested grid inherits column tracks from its parent grid. Useful for aligning content across nested components.

Quick facts

Initial value

none

Inherited

Applies to

Grid containers

Animation type

discrete

Examples

Responsive cards without media queries

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

Cards are at least 240px wide. Grid fits as many as possible per row and wraps when there is not enough space. No media queries needed.

Fixed sidebar with flexible main

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

Sidebar stays at 240px, main content fills the remaining space. Classic app layout.

Equal columns that can shrink

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

Three equal columns. The minmax(0, 1fr) lets columns shrink below their content size, preventing content overflow from pushing columns wider.

grid-template-columns Browser Support

Widely available Since 2017 95% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

57+

52+

10.1+

16+

Common pitfalls

1fr is not the same as minmax(0, 1fr)

1fr has an implicit minimum of auto, which means the column will not shrink below its content size. If you have long text or wide images, columns can stretch beyond 1fr. Use minmax(0, 1fr) to force columns to truly share equal space.

auto-fit vs auto-fill behave differently

auto-fit collapses empty columns, so remaining items stretch to fill the row. auto-fill keeps empty tracks reserved, so items stay at their minmax minimum width. Pick auto-fit for flexible cards and auto-fill for grids with fixed column slots.

Percentages include gaps in older implementations

In older browsers, 50% columns in a grid with gap could overflow because gap was added on top. Modern implementations size tracks to fit after gaps are subtracted, but verify if supporting older builds.