Grid template values cheatsheet

1fr — one fractional unit. Shares space equally with other fr tracks.
repeat(3, 1fr) — shorthand for 1fr 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.

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.

Written by Mian Ali Khalid. Last updated 2026-04-25.