CSS Grid Tracks

A track is just the technical name for one row or one column in your grid -- and CSS gives you several ways to size a track besides typing a fixed pixel number.

In this page:

What Counts as a Track
The fr Unit
repeat() for Repetitive Patterns
minmax() for Flexible-but-Bounded Tracks
auto-fill vs auto-fit

Syntax

css

selector {
  grid-template-columns: 1fr 2fr repeat(count, size);
  grid-template-rows: size1 size2;
  grid-auto-rows: size;
}

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.

Note:

Accepted values:
length — fixed size such as 200px
fr — flexible fraction of free space
auto — sizes to the content
min-content | max-content — smallest or largest content size
repeat(count, size) — repeated tracks
minmax(min, max) — range for a track
auto-fill | auto-fit — repeat as many tracks as fit

Example: What Counts as a Track

css

<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.

Note:

Accepted values:
1fr — one share of the free space
2fr — twice a 1fr share
minmax(0, 1fr) — prevents overflow from content
auto — sizes to content
note: fr can only be used in track lists

Example: The fr Unit

css

<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.

Note:

Accepted values:
repeat(3, 1fr) — three equal tracks
repeat(auto-fill, minmax(200px, 1fr)) — as many as fit
repeat(auto-fit, minmax(200px, 1fr)) — fit and collapse empty tracks
repeat(2, 100px 200px) — repeats a pattern

Example: repeat() for Repetitive Patterns

css

<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.

Note:

Accepted values:
minmax(100px, 1fr) — at least 100px, grows to share space
minmax(0, 1fr) — may shrink to nothing
minmax(auto, 300px) — content-sized up to 300px
minmax(min-content, max-content) — content bounds

Example: minmax() for Flexible-but-Bounded Tracks

css

<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.

Note:

Accepted values:
auto-fill — creates as many tracks as fit, keeps empty ones
auto-fit — as many as fit, collapses empty ones
minmax(200px, 1fr) — the usual track size
repeat() — the function that uses them

Example: auto-fill vs auto-fit

css

<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>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Container Next Lesson → CSS Grid Gaps

CSS Grid Tracks

What Counts as a Track

The fr Unit

repeat() for Repetitive Patterns

minmax() for Flexible-but-Bounded Tracks

auto-fill vs auto-fit

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code