Grid template values cheatsheet
1fr— one fractional unit. Shares space equally with otherfrtracks.repeat(3, 1fr)— shorthand for1fr 1fr 1fr.repeat(auto-fill, minmax(200px, 1fr))— responsive masonry. As many 200px-min columns as fit, each flexing up to fill.200px auto 1fr— fixed sidebar, auto-width sidebar 2, flexible main area.minmax(100px, 300px)— clamps a track size between a floor and ceiling.
When to use Grid
Grid is for 2-dimensional layouts — pages, card grids, forms with aligned labels. For 1-D (nav, toolbars), use Flexbox.
Related tools
- Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
- Aspect Ratio Calculator — Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.
- Flexbox Generator — Visual CSS Flexbox playground. Live preview + copyable CSS. Control direction, wrap, justify, align, gap. Example child layouts.
- Box Shadow Generator — Visual CSS box-shadow builder. Control offset, blur, spread, color, inset. Multi-layer shadows. Live preview + copyable CSS.
Pillar
Part of Frontend & Design.
Written by Mian Ali Khalid. Last updated 2026-04-25.