Why it matters
Grid and Flexbox replaced floats and frameworks for layout years ago, and every current browser supports both. But the properties are easy to mix up: justify-items or justify-content, auto-fill or auto-fit, and which ones belong on the container rather than the items.
Seeing the result as you change each setting is the quickest way to learn them, and the fastest way to get a tricky layout right. The code this writes is plain CSS with no framework, ready to paste.
How to use it
- Choose CSS Grid or Flexbox, or start from a preset.
- Set the columns, rows, gaps and alignment for the container.
- Select an item in the preview to change its span or flex values.
- Copy or download the CSS and HTML.
FAQ
What's the difference between auto-fill and auto-fit?
Both fit as many columns as there's room for. With only a few items, auto-fill keeps the empty column tracks, so items stay their minimum size; auto-fit collapses them, so items stretch to fill the row. This tool writes auto-fit with min(220px, 100%), so a single card never overflows a narrow phone.
When should I use Grid rather than Flexbox?
Use Grid when you're placing things in rows and columns at the same time, like a card grid or a page layout. Use Flexbox for one row or column of things, like a navigation bar or a row of buttons.
What does dense do?
grid-auto-flow: dense lets later, smaller items fill gaps left by bigger ones. It can change the visual order, so keep the HTML order sensible for keyboard and screen reader users.
Does it work on phones?
Yes. The preview scrolls sideways if your layout is wider than the screen.
