Flexbox / Grid

Pick flex-direction, justify-content, alignment, wrap and gap (or grid columns and gaps) and see the layout update live, then copy the generated CSS.

Pick flex-direction, justify-content, alignment, wrap and gap (or grid columns and gaps) and see the layout update live, then copy the generated CSS.

How to use

  1. Choose Flexbox or Grid
  2. Adjust direction, alignment, wrap/columns and gap
  3. Watch the boxes rearrange in the live preview
  4. Copy the generated .container CSS

Frequently asked questions

Flexbox or Grid — which should I use?

Flexbox is best for one-dimensional layouts (a row or a column); Grid excels at two-dimensional layouts with rows and columns.

What does justify vs align control?

In flex, justify-content positions items along the main axis and align-items along the cross axis; grid uses justify-items/align-items per cell.

Is the CSS ready to paste?

Yes — the output targets a .container class you can drop straight into your stylesheet.