Grid Rows, Columns, and fr Units

Grid tracks determine available row and column sizes. The fr unit divides leftover space within a grid container.

grid-template-columns: 1fr 2fr creates two tracks with a one-to-two share of free space after nonflexible sizes and gaps. grid-template-rows controls the sizes of explicit rows. Tracks can also use fixed or intrinsic sizing, for example 180px minmax(0, 1fr).

Be careful with min-content constraints: plain 1fr tracks can resist shrinking around long unbroken content. minmax(0,1fr) lets a track contract further, while minmax(160px,1fr) preserves a minimum.

fr distributes positive free space among flexible tracks; row sizing works along the block axis.

Reserve a narrow side track and grow the main content.

HTML

<div class="tracks"><div>Menu</div><div>Main content region</div></div>

CSS

.tracks { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 9px; max-width: 380px; padding: 10px; background: #f8fafc; }
.tracks div { padding: 18px 8px; background: #dbeafe; border-radius: 7px; }

Rendered output

Observe: The sidebar uses a fixed 90px track while the main content receives the remaining width.

Set two explicit row heights for a four-cell grid.

HTML

<div class="tracks four"><div>1</div><div>2</div><div>3</div><div>4</div></div>

CSS

.tracks.four { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 55px 85px; gap: 8px; max-width: 360px; }
.tracks.four div { display: grid; place-items: center; background: #ccfbf1; border-radius: 7px; font-weight: 700; }

Rendered output

Observe: There are two columns with different widths and two explicit rows of 55px and 85px.

fr distributes positive free space among flexible tracks; row sizing works along the block axis.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• An fr is not simply a percentage of the container; gutters and other tracks are considered first.
• Track min-size constraints can still cause overflow if content cannot break or shrink.

Change grid-template-columns to 2fr 1fr and swap grid row heights; predict the cell positions.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Combine fixed, fractional and minmax sizes to establish deliberate Grid track geometry.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.