grid-template-columns
Defines the grid’s columns: their number and widths.
- Initial value
none- Inherited
- No
- Animatable
- yes, when only the values change while the number of columns stays the same
- Applies to
- grid containers
- JavaScript
element.style.gridTemplateColumns = "1fr 2fr"
Example
#.courses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}<div class="courses stage">
<div class="box">HTML and CSS</div><div class="box">JavaScript</div><div class="box">TypeScript</div>
<div class="box">Python</div><div class="box">React</div>
</div>Definition and usage
#The grid-template-columns property is the heart of a CSS Grid layout. Each value in the list is one column, so 200px 1fr 1fr creates three columns: the first with a fixed width, and two that split the rest of the space evenly.
The fr unit represents a fraction of the free space, and the repeat() function shortens repeating patterns. repeat(auto-fill, minmax(160px, 1fr)) creates as many columns at least 160px wide as will fit, without any @media queries.
Grid items are placed automatically into the next cells, row by row. Rows you don’t define are created on their own and get their height from grid-auto-rows.
Syntax
#grid-template-columns: none | <track-size>+ | repeat(…) | subgrid;Values
#<length>
Two columns with a fixed width.<fr>
The second column is twice as wide as the first.repeat()
Three equal columns.- A fixed column, a flexible one, and one sized to its content.
repeat(auto-fill, minmax(70px, 1fr))
auto-fill + minmax()
As many columns at least 70px wide as will fit. The grid adapts to the available width on its own.
Values in practice
#100px 100px
.demo { grid-template-columns: 100px 100px; }1fr 2fr
.demo { grid-template-columns: 1fr 2fr; }repeat(3, 1fr)
.demo { grid-template-columns: repeat(3, 1fr); }80px 1fr auto
.demo { grid-template-columns: 80px 1fr auto; }repeat(auto-fill, minmax(70px, 1fr))
.demo { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#minmax(160px, 1fr)withauto-fillorauto-fitis the simplest responsive card grid, with no screen-width queries at all.frdivides up free space, so1fr 1frdoesn’t always give equal columns when content is large.minmax(0, 1fr)helps with that.
Related entries
#- Flexbox vs GridFlexbox lays out items along one dimension and sizes to their content. Grid defines a two-dimensional grid of rows and columns that you place items into.
- grid-template-rowsDefines the grid’s rows: their number and heights.
- grid-template-areasDescribes the grid layout with named areas, almost like a drawing in code.
- gapSets the spacing between items in a flex, grid, or multi-column container.
- grid-auto-flowDecides how items without an explicit position fill the grid.
- grid-columnSets which grid columns an item starts and ends in.
Spotted a mistake or missing an example? Write to us.