A grid track is one row or column of a CSS Grid container. Its final width or height can come from a fixed value, a fractional fr value, content-aware sizing, or a sizing function. The browser calculates each track so the grid can divide available space horizontally and vertically with intentional proportions. section 4.1 section 4.3
Fractional tracks behave like an algebraic relationship. In `grid-template-columns: 1fr 2fr 1fr`, the available width is split into four equal fractions: the first and third tracks receive one fraction each, and the middle track receives two. When the container changes size, the browser recalculates those track sizes while preserving the ratio. section 4.1.3
grid-template-columns: 1fr 2fr 1fr;
This declaration creates three tracks in a 1:2:1 proportional relationship. section 4.1.3
Track sizing also accounts for content and constraints. The sizing algorithm identifies explicit tracks declared with `grid-template-columns` or `grid-template-rows` and implicit tracks added or reached through placement. It derives intrinsic sizes for `min-content`, `max-content`, and `auto`, resolves content-based growth or shrinkage, then distributes remaining space to `fr` tracks. section 4.3
Choose a track size according to the layout behavior you need:
- Use fixed units when a track needs a fixed dimension. section 4.1
- Use `fr` units when tracks should share available space proportionally. section 4.1 section 4.1.3
- Use `minmax(min, max)` to keep a track within lower and upper bounds; if `max` is below `min`, the browser uses the minimum. section 4.4.1
- Use `auto` for a content-aware track bounded by intrinsic minimum and maximum sizes, while respecting applicable minimum and maximum dimensions. section 4.4.2
Protecting a responsive column with minmax()
`grid-template-columns: 3fr minmax(250px, 1fr);` divides a 1200px container into 900px and 300px tracks. At 800px, one fraction would be 200px, but the second track cannot fall below 250px, so it becomes 250px and the first track is reduced to 550px. This makes a useful pattern for card layouts that need a readable minimum width while still growing into available space. section 4.4.1
Listing 4.7 Using minmax() to constrain a product card grid
<head>
<style>
.product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(250px, 1fr));
gap: 1.5rem;
}
</style>
</head>
<body>
<h1>Featured Products</h1>
<div class="product-grid">
<div class="product-card">
<img src="https://placehold.co/150" alt="Product 1">
<h3>Notebook</h3>
<p>Premium hardcover notebook with 200 pages.</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://placehold.co/150" alt="Product 2">
<h3>Wireless Mouse</h3>
<p>Ergonomic mouse with 2.4GHz wireless connection.</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://placehold.co/150" alt="Product 3">
<h3>Backpack</h3>
<p>Durable backpack with padded laptop compartment.</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://placehold.co/150" alt="Product 4">
<h3>USB-C Charger</h3>
<p>Fast-charging USB-C wall adapter (60W).</p>
<button>Add to Cart</button>
</div>
</div>
</body>
This product-card grid applies `minmax(250px, 1fr)` to give each of four tracks a 250px minimum while allowing growth. section 4.4.1
Tracks also provide the distance used by placement. `grid-column: 2 / span 3` starts at line 2 and covers three tracks, so its ending line is 5. Span notation is useful when the desired coverage is known but an absolute ending line is not. section 4.2.2
Constraining an auto sidebar
With `grid-template-columns: auto 1fr`, a sidebar can size from its content while `min-width: 150px` and `max-width: 300px` prevent it from becoming too narrow or too wide. The other track receives the remaining space. section 4.4.2
