CSS Grid Tracks
In this page:
What Counts as a Track
Every row and every column in a grid is called a track. grid-template-columns and grid-template-rows each define a list of track sizes, one entry per track, and CSS Grid lays items into the tracks it finds.
Example: What Counts as a Track
<style>
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px;
gap: 4px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
}
</style>
<div class="container">
<div>Track</div>
<div>Track</div>
</div>The fr Unit
fr stands for "fraction" and divides the remaining free space proportionally -- grid-template-columns: 1fr 2fr gives the second column twice the width of the first, after any fixed-size tracks have already taken their share.
Example: The fr Unit
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1fr</div>
<div>2fr — twice as wide</div>
</div>repeat() for Repetitive Patterns
repeat(4, 1fr) is shorthand for typing "1fr 1fr 1fr 1fr" -- useful for evenly-spaced multi-column layouts, and it accepts a comma-separated pattern too, like repeat(2, 100px 1fr) to alternate track sizes.
Example: repeat() for Repetitive Patterns
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>minmax() for Flexible-but-Bounded Tracks
minmax(150px, 1fr) tells a track to never shrink below 150px but to grow to fill available space beyond that -- solving the problem of a track becoming unreadably narrow on small screens.
Example: minmax() for Flexible-but-Bounded Tracks
<style>
.container {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Never below 150px</div>
<div>Grows to fill space</div>
</div>auto-fill vs auto-fit
Both auto-fill and auto-fit let the browser decide how many tracks fit, but auto-fill keeps empty leftover tracks visible (leaving gaps) while auto-fit collapses them to zero width, letting the real tracks stretch to fill the row -- the difference only shows up when there are fewer items than tracks fit.
Example: auto-fill vs auto-fit
<style>
.fill {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
gap: 4px;
background: #eef;
padding: 10px;
margin-bottom: 10px;
}
.fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 4px;
background: #efe;
padding: 10px;
}
.fill div, .fit div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="fill"><div>Leaves gaps</div></div>
<div class="fit"><div>Stretches to fill</div></div>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: