CSS Grid and Flexbox Builder

Design responsive Grid and Flexbox layouts with a live preview and copy-ready CSS.

Hover over or focus a field for help. Press Escape to close.

LayoutColumnsPreview itemsGap (px)DirectionDistributionAlignmentWrap items

Output

How it works

Paste your content or load the example. Choose the available options, run the tool, then copy or download the result.

Layout

Is my input sent to a server?

No. Your content is processed in this browser. It is never sent to the server or saved.

What should I know about CSS Grid and Flexbox Builder?

Preview uses numbered blocks. Generated CSS includes layout rules; adapt selectors and breakpoints to your page.