Pro Plan
Unlimited projects, SSO, audit logs, priority support.
$49/mo
Switch examples below. Each panel shows live grid behavior and the CSS driving it.
Both use repeat(auto-*, minmax(100px, 1fr)). Drag the width slider —
auto-fill keeps empty tracks (ghost columns), auto-fit collapses them so items stretch.
Tracks created: — · Items: 3 · Mode: auto-fit
Semantic area names map to cells. Toggle layout to see the same areas reflow for mobile — no HTML changes, only CSS.
Parent defines shared row tracks. Cards use grid-template-rows: subgrid to inherit them.
Toggle off to see misaligned titles, bodies, and prices.
The highlighted item uses grid-column / grid-row span.
Adjust spans to see how explicit placement overrides auto-flow.