CSS grid-template-columns Property
Definition
Definition and Usage
The grid-template-columns property sets the size (and optional line names) of the explicit column tracks on a grid container (display: grid).
The initial value is none. Pair it with grid-template-rows for rows, or use the grid-template shorthand. Implicit columns use grid-auto-columns.
Standard-track.Not deprecated and not experimental. Baseline widely available with CSS Grid. The subgrid value is newer—check support if you rely on it.
Syntax
CSS Syntax
grid-template-columns: none | <track-list> | subgrid | initial | inherit;
A track list is one or more sizes such as 100px, 1fr, auto, minmax(), or repeat().
Values
Property Values
| Value | Description | Try it |
|---|
none | Default. No explicit columns | Try it |
<length> / % | Fixed or percentage column width | Try it |
<fr> | Share of remaining free space | Try it |
minmax() / repeat() | Range size, or repeat a track pattern | Try it |
initial | Resets to none | Try it |
inherit | Takes the parent value (not inherited by default) | Try it |
Approach
How to Use grid-template-columns
List one size per column, left to right.
- Set
display: grid on the container. - Write column sizes:
grid-template-columns: 100px 1fr 1fr;. - Use
repeat(n, 1fr) for equal columns. - Use
minmax(min, max) when a column needs a floor and a ceiling.
| Value | Result |
|---|
80px 1fr | Fixed sidebar + flexible main |
1fr 1fr 1fr | Three equal columns |
repeat(3, 1fr) | Same as three 1fr tracks |
minmax(100px, 1fr) 2fr | First column at least 100px; second gets twice the free space |
Try it
Live Preview
Change only grid-template-columns. Four items fill the tracks in order.
Code
CSS Examples
Each snippet focuses on grid-template-columns. Use Try It Yourself for a live editor.
Example 1 — Fixed + Flexible
A length sizes one column; 1fr takes the rest.
<style>
.grid {
display: grid;
grid-template-columns: 80px 1fr;
}
</style>
<div class="grid">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
</div>
How It Works
- Two tracks. The value lists two column sizes, so the grid has two columns.
- Fixed first.
80px locks the first column width. - Flexible second.
1fr takes the remaining free space. - Items flow in order. 1 and 2 fill row one; 3 and 4 fill row two.
Example 2 — Equal Columns with repeat()
repeat(3, 1fr) is a short form of 1fr 1fr 1fr.
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
</style>
<div class="grid">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
</div>
How It Works
- Count first.
repeat(3, …) builds three identical tracks. - Equal share. Each track is
1fr, so free space splits three ways. - Same as listing. This matches writing
1fr 1fr 1fr by hand. - Six items, two rows. Items wrap to the next row after three columns.
Example 3 — minmax()
Give a column a minimum width while still allowing it to grow.
<style>
.grid {
display: grid;
grid-template-columns: minmax(80px, 1fr) 2fr;
}
</style>
<div class="grid">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
</div>
How It Works
- Floor and flex.
minmax(80px, 1fr) never shrinks below 80px and can grow with free space. - Larger second share.
2fr gets twice as much free space as a 1fr track. - Two columns. Items still place left to right, then wrap.
- Useful for sidebars. Keeps a readable minimum without locking a fixed width forever.
Edge Cases & Pitfalls
Explicit columns are only half the story. Watch free space and implicit tracks.
frfr shares leftover space
Fixed lengths are resolved first. Then fr tracks divide what remains—not the full container width by default.
nonenone still allows implicit columns
With none, columns appear as needed and size via grid-auto-columns.
%Percentages need a definite container size
If the grid’s inline size depends on its tracks, browsers may treat a percentage like auto.
auto-fitauto-fill vs auto-fit
Both pack as many tracks as fit. auto-fit collapses empty tracks so flexible tracks can expand into that space.
subgridsubgrid inherits the parent track sizes
Use it only inside a nested grid that spans parent tracks. Support is solid in modern browsers, but verify if you target older ones.
Compatibility
Browser Support
grid-template-columns is a browser style property for CSS Grid. Node.js, Deno, and Bun do not apply it.
✓ Baseline · Widely available
grid-template-columns
Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, Opera, Samsung Internet 6+. Not supported in Internet Explorer.
Google Chrome 57+
Full support
Mozilla Firefox 52+
Full support
Apple Safari 10.1+
Full support
Microsoft Edge 16+
Full support
Opera 44+
Full support
Samsung Internet 6+
Full support
Internet Explorer All
Not supportedgrid-template-columns Supported with modern CSS Grid
Bottom line: Safe for modern grid layouts. No vendor prefix is required in current browsers.
Remember
Key Takeaways
Role: define explicit column count and widths.
fr: shares free space after fixed tracks.
Helpers: repeat() for patterns; minmax() for ranges.
Implicit: overflow columns use grid-auto-columns, not this property.
One line: grid-template-columns lists the widths of your explicit grid columns, left to right.
Frequently Asked Questions
It defines how many explicit column tracks a grid has and how wide each track is.
none — no explicit columns. Extra columns come from grid-auto-columns when items need them.
One share of the free space left after fixed-size tracks are sized. Two 1fr columns split that space evenly.
A compact way to write 1fr 1fr 1fr — three equal flexible columns.
grid-template-columns sizes the explicit columns you declare. grid-auto-columns sizes implicit columns created by overflow or placement.
Baseline widely available: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. It is a browser style property, not a Node.js feature.
About the author
Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
