grid-template-columns
The number and widths of the columns of a grid.
Syntax
grid-template-columns: size size …;Values
| Parameter | Type | Description |
|---|---|---|
| fr | fraction | A share of the free space: `1fr 2fr`. |
| px, % | length | A fixed or percentage width. |
| repeat() | function | Repeats columns: `repeat(3, 1fr)`. |
| minmax() | function | A width between a minimum and a maximum. |
Examples
A fixed column and two flexible ones:
<style>
.grid { display: grid; grid-template-columns: 100px 1fr 2fr; gap: 6px; }
.grid div { padding: 8px; background: lightskyblue; }
</style>
<div class="grid"><div>100px</div><div>1fr</div><div>2fr</div></div>A responsive grid without media queries — as many columns as fit:
<style>
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.cards div { padding: 12px; background: palegreen; }
</style>
<div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>Notes
repeat(auto-fill, minmax(…, 1fr)) is one of the most useful lines in CSS: the number of columns adapts to the width by itself.
See also
- grid-template-rows — The number and heights of the rows of a grid.
- gap — The gaps between items in flexbox and grid.
- repeat() — Repeats grid tracks instead of writing them out one by one.
- minmax() — A grid track size between a minimum and a maximum.
- subgrid — A value of `grid-template-columns` and `grid-template-rows` that makes a nested grid reuse the tracks of its parent grid.
Related recipes
In the tutorial
- Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.