The CSS grid-template-columns property
The CSS grid-template-columns property sets the columns of a grid container — how many and how wide. Use the fr unit for flexible shares (1fr 1fr 1fr makes three equal columns) and repeat() to avoid repetition. The responsive workhorse is repeat(auto-fit, minmax(200px, 1fr)), which fits as many columns as will comfortably fit.
Overview
grid-template-columns is where a CSS grid takes shape. It defines the column tracks — both how many there are and how wide each one is — and once you set it, items flow into those columns automatically.
The star of the show is the fr unit, which represents a fraction of the leftover space. 1fr 1fr 1fr makes three equal columns; 2fr 1fr makes the first twice as wide as the second. Because fr shares space rather than fixing it, grids built this way are responsive by nature. The repeat() function saves you typing — repeat(3, 1fr) means the same as 1fr 1fr 1fr.
The pattern worth memorising is repeat(auto-fit, minmax(200px, 1fr)). It reads as "fit as many columns as you can, each at least 200px but happy to grow to share the row." That single line gives you a responsive card grid that reflows from four columns to one as the screen narrows — no media queries required.
Syntax
selector {
display: grid;
grid-template-columns: value;
}
/* responsive card grid, no media query */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}Values
The grid-template-columns property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
1fr 1fr 1fr |
Three equal flexible columns. fr is a fraction of the free space. |
repeat(3, 1fr) |
The same three equal columns, written compactly. |
200px 1fr |
A fixed 200px column next to one that fills the rest. |
minmax(200px, 1fr) |
A column at least 200px wide that can grow to fill space. |
repeat(auto-fit, minmax(200px, 1fr)) |
As many responsive columns as fit, each 200px or wider. |
Example
<style>
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
.cards div { background: #1c7ce9; color: #fff; padding: 22px 12px; border-radius: 8px; text-align: center; font: 600 14px system-ui, sans-serif; }
</style>
<div class="cards">
<div>A</div><div>B</div><div>C</div><div>D</div>
</div>Best practices
- Reach for the
frunit for column widths — it shares space responsively, unlike fixed pixels or percentages. - Memorise
repeat(auto-fit, minmax(200px, 1fr))for card grids that reflow on their own as the screen changes. - Pair it with gap for the gutters rather than margins on the items.
- Use
auto-fillinstead ofauto-fitwhen you want empty column tracks to be kept rather than collapsed — the difference shows when items do not fill the row.
Frequently asked questions
How do I make three equal columns in CSS grid?
grid-template-columns: repeat(3, 1fr) (or 1fr 1fr 1fr) on a display: grid container. The fr unit splits the space into equal shares.What is the fr unit in CSS grid?
2fr 1fr gives the first column twice the share of the second. It makes grids responsive without fixed widths.How do I make a responsive grid without media queries?
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). The grid fits as many 200px-minimum columns as the width allows and reflows automatically.What is the difference between auto-fit and auto-fill?
auto-fit collapses empty tracks so the visible items stretch to fill the row; auto-fill keeps the empty tracks, leaving gaps. They look identical until there are fewer items than columns.