IconVault logoIconVault
Sign in

Grid Track Sizing - Interactive Lab | IconVault

Watch the browser resolve fr, minmax() and auto tracks into real pixels. Free interactive CSS grid lab, runs fully in your browser.

All tools

Grid Track Sizing

Watch the browser resolve fr, minmax() and auto tracks

5 of 5 free uses left

Presets

Tracks

1
2
3
Container width760px
Gap12px

5 of 5 free copies left.

One
Two words
Three medium words
Supercalifragilisticexpialidocious
Five
A slightly longer sentence here
Seven
Eight is great

Resolved track sizes (read from the live browser engine)

TrackYour definitionResolved widthShare
11fr-0.0%
21fr-0.0%
31fr-0.0%

Tracks total 0px + gaps 24px = 24px of 760px. Unused space: 736px (no fr track claimed it).

grid.css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
/* container: 760px wide */

What you are seeing

fr divides leftover space after fixed tracks. minmax(min, max) clamps a track between two bounds. auto, min-content and max-content size from the items inside, which is why the long word stretches its track. Try narrowing the container to watch minmax() bottom out at its minimum.

About this tool

IconVault's Grid Track Sizing lab lets you configure CSS grid column tracks and watch the browser resolve them into real pixels. Pick track definitions like 1fr, minmax(150px, 1fr), auto, min-content or max-content, drag the container width, and read the exact resolved width of every track straight from the live layout engine. It is free and runs fully in your browser.

This is the fastest way to build intuition for the CSS grid track sizing algorithm: how fr units divide leftover space, how minmax() clamps tracks between bounds, and how content-sized keywords react to long words. When the layout looks right, copy the generated grid-template-columns CSS and paste it into your project.

Frequently asked questions

Popular searches

css grid track sizinggrid-template-columnscss grid fr unitcss grid minmaxminmax css grid examplecss grid auto vs frcss grid min-content max-contentcss grid fit-contenthow fr unit works csscss grid leftover spacecss grid track size calculatorcss grid visualizercss grid playgroundcss grid interactive tutoriallearn css grid tracksgrid-template-columns frgrid-template-columns minmaxgrid-template-columns autocss grid column widthcss grid responsive columnscss grid repeat minmaxrepeat auto-fit minmaxcss grid track sizing algorithmcss grid intrinsic sizingcss grid fixed vs flexible trackscss grid gapcss grid container widthcss grid resolved sizesgetcomputedstyle gridtemplatecolumnscss grid devtoolscss grid holy grailcss grid sidebar layoutcss grid 3 columnscss grid equal columnscss grid column sizesunderstanding css gridcss grid tutorialcss grid explainedcss grid cheat sheetcss grid generatorcss grid template columns generatorminmax 150px 1frminmax 100px 300pxcss grid max-content examplecss grid min-content examplecss grid auto fit vs auto fillcss grid fr minimumfr unit minimum contentcss grid overflow trackcss grid long word overflowcss grid track listcss grid explicit trackscss grid sizing playgroundinteractive css grid lab

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →