Flexbox & CSS Grid Generator
Build flexbox and CSS grid layouts visually — direction, wrap, alignment, gap, columns and rows — and copy the CSS or Tailwind classes.
How to use
- 1Choose Flexbox or Grid and set the container options.
- 2Watch the preview update, then copy the CSS or Tailwind classes.
Frequently asked questions
Flexbox or grid — which should I use?
Flexbox for one-dimensional rows or columns (navbars, button groups); grid for two-dimensional layouts (cards, page structure).
What does justify-content do?
It aligns items along the main axis — horizontally in a row.
What does fr mean in grid?
A fraction of the free space: 1fr 2fr gives the second column twice the width of the first.