CSS Grid & Flexbox Generator
Visually build CSS Grid and Flexbox layouts. Adjust columns, rows, gaps, alignment, and direction with a live preview, then copy clean, production-ready CSS.
Layout type
1
2
3
4
5
6
Columns: 3
Rows: 2
Gap: 12px
CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;
}How to use the layout generator
- Switch between Grid and Flexbox.
- For Grid, set the number of columns, rows, and the gap.
- For Flexbox, choose direction, justify-content, align-items, and wrap.
- Watch the live preview, then copy the generated CSS.
CSS Grid vs Flexbox
CSS Grid and Flexbox are the two modern layout systems in CSS. Grid excels at two-dimensional layouts — think dashboards, galleries, and page scaffolding — where you control both rows and columns. Flexbox is built for one-dimensional flow, like navbars, toolbars, and centering content along a single axis.
Style your layout with colors from the HEX to RGB converter and add depth with the CSS gradient generator.
Frequently asked questions
Is this CSS grid generator free?
Yes, it's free with no sign-up. Configure your layout visually and copy the generated CSS — everything runs in your browser.
Should I use CSS Grid or Flexbox?
Use CSS Grid for two-dimensional layouts (rows and columns together), and Flexbox for one-dimensional layouts (a single row or column). This tool lets you preview both and copy whichever fits.
What does the gap property do?
The gap property sets consistent spacing between grid or flex items without needing margins, so items never touch and edges stay clean.
Can I copy the generated CSS?
Yes. The CSS for your .container updates live as you change the controls — click Copy to paste it straight into your stylesheet.
Need a whole screen, not just a snippet?Describe an app screen and MakeUI generates editable UI you can export to Figma or code.
Try MakeUI