grid-template-columns
The grid-template-columns property defines the column tracks of a grid container — how many columns there are and how wide each one is, using lengths, the fr unit, repeat(), minmax() and keywords.
Definition
grid-template-columns defines the column tracks of a grid container: it sets both *how many* columns the grid has and *how wide* each one is. You give it a space-separated list of track sizes, and the number of sizes in that list is the number of columns the browser creates. It is applied to the grid container, alongside display: grid, and it is the single most important property for shaping a grid's horizontal structure.
Each entry in the list is a track size, and the values you can use are what give the property its range: a fixed length, a flexible fr fraction, a percentage, the auto keyword, or a function such as repeat() or minmax(). Mixing them is normal — 200px 1fr pins a sidebar and lets the main column absorb the rest. Its vertical counterpart, grid-template-rows, takes exactly the same value syntax.
Syntax
/* a list of track sizes; each size = one column */
.container {
display: grid;
grid-template-columns: <track-size> <track-size> ...;
}
/* example: fixed sidebar + flexible main */
grid-template-columns: 200px 1fr;Parameters
| Value / function | Effect |
|---|---|
fr | The fraction unit. One fr is one share of the space remaining after fixed tracks are subtracted; repeat(2, 1fr) yields two equal columns, 2fr 1fr a 2:1 split. |
repeat() | Repeats a track pattern. repeat(3, 1fr) expands to three equal 1fr columns; repeat(auto-fit, minmax(120px, 1fr)) builds a responsive column count. |
minmax() | Sets a track's minimum and maximum size. minmax(120px, 1fr) keeps a column at least 120px wide but lets it grow to fill free space. |
auto | Sizes the track to its content: as wide as the widest item it holds, then no wider. Useful for a column that should hug its contents. |
percentage | A percentage of the container's inline size. grid-template-columns: 25% 75% gives a quarter/three-quarter split relative to the grid's width. |
Fixed lengths (px, rem, em) are also valid track sizes and behave as you would expect — a 200px column is always 200 pixels wide regardless of free space. The values above are the ones specific to grid track sizing; combine them freely within one track list.
Return value
grid-template-columns has no return value in the programmatic sense — it is a CSS property, and its effect is what it defines. It creates the grid's column tracks: the browser lays out the listed sizes left to right, draws a numbered grid line between each pair of tracks, and slots grid items into the resulting cells. Change the value and the visible column structure of the grid changes immediately, with items reflowing into the new tracks.
- The number of values determines the number of explicit columns.
frandpercentagetracks recompute as the container resizes; fixed lengths do not.- Items beyond the last explicit column wrap into new rows the grid creates automatically.
Examples
Three equal columns with repeat()
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}Fixed sidebar, flexible main
A 2fr / 1fr proportional split
Responsive columns with repeat(auto-fit, minmax())
A content-sized auto column beside a flexible one
A percentage split
Browser & runtime support
grid-template-columns is part of CSS Grid Layout, supported in every current browser and mobile engine; it has been stable and unprefixed for years, so no fallback is needed for a modern audience. For the property that spaces these tracks apart, see the gap property; for a task-oriented build see how to create a grid layout.
Frequently asked questions
What is the fr unit in grid-template-columns?
repeat(3, 1fr) makes three equal columns; 2fr 1fr makes the first column twice as wide as the second.How do I make a responsive number of columns?
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)). The grid fits as many 120px-minimum columns as the width allows and stretches them to fill the row, with no media queries.What does the auto keyword do in a track list?
auto track sizes itself to its content — as wide as the widest item it contains, then no wider. It is handy for a column that should hug its contents while other columns take the remaining space.