Design guide
CSS Flexbox and Grid Cheat Sheet with Live Demos
Property tables, two live playgrounds you can drag, reusable layout recipes, and a table of the layout bugs that waste an afternoon.
A practical layout reference for front-end developers and designers who build interfaces. Start with a simple guide to choosing Flexbox or Grid, then use the filterable property tables and two interactive playgrounds to see how gap, basis, and columns change a layout in real time. Copy ready-made recipes for centering, responsive card grids with no media queries, full page layouts, sidebars that stack on their own, container queries, fluid type, and subgrid. Finish with a searchable table of the most common layout bugs, their causes, and their fixes.
A living reference, not a download. Buy once and every update is included. It's currently on version 1, and you read it in your account, always current.
- Sections
- 6
- Code samples
- 4
- Tables
- 4
Outcomes
What you will be able to do
- Decide between Flexbox and Grid without second-guessing
- Build responsive card grids and page layouts with no media queries
- Fix the classic overflow, centering, and full-height bugs quickly
- Use container queries, clamp, aspect-ratio, and subgrid in real layouts
- Experiment with live playgrounds instead of guessing at values
Is this for you?
Made for
- Front-end developers who still reach for floats or trial-and-error margins
- Designers who code and want layouts to behave the way the mockup does
- Anyone who has asked why a flex child will not stop overflowing
Probably not for
- Developers who want a CSS framework or component library
- Anyone looking for animation or color theory content
Free preview
Read a piece before you buy
Most layout problems come down to choosing between Flexbox (one dimension) and Grid (two dimensions), then remembering a few properties. This sheet gives you both property tables, two live demos you can drag, the recipes people look up most, and a table of the bugs that waste an afternoon.
Rule of thumb: if you are laying out a row or a column of things, use Flexbox. If you are laying out rows and columns, use Grid.
Flexbox or Grid?
| Question | Flexbox | Grid |
|---|---|---|
| Dimensions | One axis at a time | Rows and columns together |
| Sizing driven by | Content (items push the layout) | The layout (tracks you define) |
| Best for | Navbars, toolbars, button rows, centering | Page layouts, card galleries, dashboards |
| Alignment of items across rows | Each wrapped row aligns on its own | Items line up in shared columns |
| Overlapping items | Awkward | Natural with line numbers or areas |
Flexbox playground: wrapping and basis
:root {
--gap: 12px;
--basis: 120px;
--pad: 16px;
}Questions, answered
Do the playgrounds need any setup?
No. They run right in the guide. Move the sliders to see the layout change.
Which browsers does this cover?
All current evergreen browsers. Container queries and subgrid are supported in current Chrome, Edge, Safari, and Firefox.
Is this tied to Tailwind or any framework?
No. It is plain CSS, so the ideas carry over to any framework.
A clear reference, ready when you need it.
Purchase unlocks the complete guide in your account, with every future update included. You'll create or sign in to your account at checkout so your access stays attached to you.