CSS Grid & Flexbox Generator

Draw a layout, then copy the CSS and HTML.

Private by design

Your inputs stay on your device and are not sent to our servers. Optional usage analytics does not receive your files or tool inputs.

Preparing css grid & flexbox generator

Preparing tool

How to use CSS Grid & Flexbox Generator

Choose Grid or Flexbox, then set columns, rows, gaps or alignment.
In Grid, drag across cells to place an item; in Flexbox, select an item to tune it.
Copy the CSS and HTML, or start from a preset.

Read the detailed guide →

What are the limits of CSS Grid & Flexbox Generator?

Covers the common grid and flexbox properties, not named grid areas, subgrid or masonry. Item sizes in the preview follow your CSS exactly, so check it at your real content sizes. Your layout stays on your device.