Visual CSS Grid and Flexbox generator with live preview

Choose Grid or Flexbox, change columns, gap and alignment and watch the layout update instantly. Copy the CSS for your site or WordPress.

How to use

Choose Grid to place items in columns, or Flexbox to line them up in a row or column.
Change the columns, gap and alignment. The preview on the right updates instantly.
Click Copy code and paste it into your CSS file, then add the layout class to the parent block.

When should I use Grid and when Flexbox?

Grid suits two-dimensional layouts such as product grids and post cards. Flexbox suits one row or column, such as a menu bar or a row of buttons.

How do I use it in WordPress?

Add the layout class to a Group block under Advanced, then paste the code into your theme's Additional CSS.

Does it wrap on phones?

Flexbox with Wrap turned on does. For Grid, reduce the column count on small screens with a media query.