Grid
CSS Grid layout patterns: column templates, named areas, auto-fill/fit, dense packing, and responsive collapse.
1. Fixed Column Counts
grid-cols-N sets an explicit number of equal-width columns. Pair with gap-* for gutter control.
grid-cols-2 — two-column layout (product pairs, split content)
grid-cols-3 — three-column layout (feature grid, card row)
grid-cols-4 — four-column layout (thumbnail grid, icon set)
grid-cols-6 — six-column layout (dense icon/category row)
2. Named Template Areas
grid-template-areas names zones so placement is self-documenting. Not expressible via Tailwind arbitrary values — requires custom CSS (see style block).
header / sidebar + main / footer
Holy Grail — nav + main + aside
3. auto-fill vs auto-fit
Both fill as many columns as fit the container at a minimum cell width. The difference appears when there are fewer items than columns: auto-fill keeps phantom empty tracks; auto-fit collapses them so real items expand.
auto-fill — minmax(10rem, 1fr) — empty tracks kept, items don't stretch
auto-fit — minmax(10rem, 1fr) — empty tracks collapsed, items fill row
auto-fill — many items — wraps naturally (minmax 8rem)
4. Span — Column & Row
col-span-N and row-span-N let individual items bridge multiple tracks — essential for feature highlights, hero cards, and editorial layouts.
4-col grid — col-span-1 / col-span-2 / col-span-4
3-col grid — row-span-2 sidebar + regular cells
Editorial layout — featured article + 4 thumbnails
5. Dense Packing
grid-flow-dense back-fills gaps left by spanning items. Critical for image galleries and dashboard widgets where visual order matters less than density.
Without dense — gaps remain after wide items
With grid-flow-dense — gaps back-filled
6. Responsive Collapse
Tailwind breakpoint prefixes on grid-cols-* collapse multi-column grids to single-column on small screens without a media query in your CSS.
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 — resize to see collapse
Uses minmax(min(100%, 10rem), 1fr) — a single rule that gracefully
goes from 1 col on mobile to N cols on wide screens without breakpoints.
Asymmetric: 2/3 content + 1/3 sidebar — collapses to stacked
7. Gap Control
gap-* sets row and column gap uniformly. gap-x-* / gap-y-* set them independently — useful when vertical rhythm should differ from horizontal spacing (e.g. card grids).
gap-1 (4px) — tight icon grid
gap-4 (16px) — standard card grid
gap-8 (32px) — editorial breathing room
gap-x-6 gap-y-2 — wide column gap, tight row gap
8. Interactive Playground
Adjust columns, gap, flow, and item count. The generated CSS is shown below.
9. Edge Cases
Scenarios that surface bugs in grid implementations. Test before shipping.
Zero items — grid container should not collapse or throw layout
One item — auto-fit collapses to full width (intentional)
Overflow content — long text inside a cell with minmax(0,1fr)
minmax(0, 1fr) is critical — 1fr alone has an implicit min of auto which lets cells overflow their track.
Odd item count on even-column grid
7 items on a 4-col grid — last row has 3 cells and one empty track. Consider
col-span on the last item or grid-flow-dense
if this looks wrong in context.