GRID / LESSON 02

Budget track space and diagnose intrinsic overflow

Calculate what remains after fixed tracks and gaps, then test the minimum behind 1fr.

Content updated

By the end, you can…

  • fr shares remaining track space. A bare 1fr can still have a content-driven minimum.
  • Create a fixed sidebar and flexible content area, then keep a long filename inside the available width.
Before you begin

Build on the CSS introduction

Instead of another equal-column example, reserve a 100px sidebar inside a 360px grid with a 20px gap. That leaves 240px for the flexible track. The gap is part of the budget before the fraction receives its space. No container padding or item padding is included in this numerical example; add those costs when adapting it to a real design.

A fractional track is not simply a percentage of the outer width. Two percentage columns that already sum to 100% leave no room for an added gap. Flexible tracks account for their available space through the track-sizing algorithm. Inspect the computed track sizes rather than guessing from a screenshot when the difference is small.

A bare 1fr has an automatic minimum that can be influenced by an unbroken word. The next variant adds such a word and lets the grid exceed its intended width. minmax(0, 1fr) relaxes the track's minimum. overflow-wrap: anywhere gives the text a readable way to fit. Track sizing and content wrapping are two related but separate decisions.

What to remember first

Remember first

fr shares remaining track space. A bare 1fr can still have a content-driven minimum.

Tools for this experiment

100px 1frReserve, then distribute
The fixed track takes 100px; after the gap, the other track receives the available remainder.
minmax(0, 1fr)Remove the automatic track minimum
The flexible track can shrink below a long word's intrinsic width.
overflow-wrap: anywhereAllow text to break
It protects readability when long unbroken content would otherwise spill outside its item.
gap: 20pxBudget the gutter
With two tracks there is one gap, not two.

Walk through an example

Use this HTML inside the body of a document and place the CSS in your linked stylesheet. The preview adds a dashed outline and card colors to make boundaries visible; those decorations do not control the layout. Its body has 16px padding on each side. Fixed preview widths are intentional: on a small screen, scroll inside the preview to inspect the whole experiment.

html
<div class="layout">
  <div class="item">A</div>
  <div class="item">B</div>
</div>
css
.layout {
  display: grid;
  width: 360px;
  grid-template-columns: 100px 1fr;
  gap: 20px;
}
.item {
  padding: 0;
}

After the 100px track and 20px gutter, the flexible track gets 240px.

See it happen: try a small change

A fixed budget meets real content

All variants keep a 360px container, a 100px sidebar, and a 20px gap. Scroll inside the preview to inspect the deliberate overflow.

Code to notice

.layout {
  display: grid;
  width: 360px;
  grid-template-columns: 100px 1fr;
  gap: 20px;
}
.item {
  padding: 0;
}

Live result

Lesson example
index.htmlPreview

What changed: After the 100px track and 20px gutter, the flexible track gets 240px.

A common wrong turn

Changing a track's minimum does not by itself clip or wrap its content. Do not report the layout as fixed merely because the container's declared width is unchanged; inspect whether the actual text still overflows that box.

Try it in your own project

Copy the example into your local HTML and CSS files. Predict one change before saving and refreshing the browser. Use the interactive versions above to check your prediction, then explain which container, item, or track changed. The related playground offers extra practice with its supported controls; use your local files for properties it does not expose.

Your turn: budget track space and diagnose intrinsic overflow

Create a fixed sidebar and flexible content area, then keep a long filename inside the available width.

Optional exploration

Use the playground to explore the controls and generated code. It is an open experiment, so it does not check your answer.

Open Grid playground →

  1. Predict the second track's width from 360 − 100 − 20. Verify the 240px result in the first preview.
  2. Add an unbroken filename and observe how a bare 1fr responds. Identify the constraint before changing the outer width.
  3. Use a zero-minimum flexible track and text wrapping. Check both the grid width and the visible text, then choose a single-column breakpoint for a real narrow-screen version.

Go to the source

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.