Flex & Grid Cheatsheet
A quick reference for the most useful layout utilities.
Flex container
| Goal | Classes |
|---|
| Enable flex | flex / inline-flex |
| Row layout | flex-row |
| Column layout | flex-col |
| Wrap items | flex-wrap |
| Center (main axis) | justify-center |
| Center (cross axis) | items-center |
| Space items evenly | justify-between, justify-around, justify-evenly |
| Gap | gap-4, gap-x-2, gap-y-6 |
Flex items
| Goal | Classes |
|---|
| Fill remaining space | flex-1 |
| Never shrink | shrink-0 |
| Grow to fill | grow |
| Auto size | flex-auto |
| No flex behavior | flex-none |
| Reorder | order-first, order-last, order-2 |
| Align self | self-center, self-end |
Grid container
| Goal | Classes |
|---|
| Enable grid | grid / inline-grid |
| 3 equal columns | grid-cols-3 |
| 2 equal rows | grid-rows-2 |
| Custom template | grid-cols-[200px_1fr] |
| Gap | gap-4 |
| Column flow | grid-flow-col |
| Dense packing | grid-flow-row-dense |
Grid items
| Goal | Classes |
|---|
| Span 2 columns | col-span-2 |
| Span all columns | col-span-full |
| Span 2 rows | row-span-2 |
| Start at line 2 | col-start-2 |
| End at line 4 | col-end-4 |
| Center in cell | justify-self-center, self-center |
Common patterns
- Perfect center:
flex items-center justify-center - Card grid:
grid grid-cols-1 md:grid-cols-3 gap-6 - Sidebar layout:
grid grid-cols-[240px_1fr] - Auto-fit cards:
grid-cols-[repeat(auto-fit,minmax(240px,1fr))] - Footer with gap:
flex justify-between items-center
TL;DR
flex for 1D, grid for 2D layouts.- Centering:
flex items-center justify-center. - Columns:
grid-cols-<n>; spans: col-span-<n>. - Use
gap instead of margins.