CSS Grid & Flexbox Generator
Switch between Grid and Flexbox, adjust the number of columns and rows or the direction and alignment of flex items and the gap between them, with a live preview of colored boxes inside the container, then copy the exact CSS code.
Design & CSS Tools Runs entirely in your browser
All processing happens on your device — nothing is sent to a server.
1
2
3
4
5
6
CSS code
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px;
What this tool does
Generates layout CSS using Grid or Flexbox by setting columns, rows, gaps, direction and alignment, with a live preview.
When to use it
- A page or section layout whose code you want ready-made.
- Learning the difference between Grid and Flexbox by trying both.
- Aligning elements without remembering which property does it.
- Trying alignment values to see what each one does.
How to use it
- Choose "Grid" or "Flexbox".
- Set "Columns", "Rows" and "Gap" for a grid, or "Direction" for flex.
- Set "Justify content" and "Align items".
- Copy the "CSS code".
A practical example
Input
Flexbox in row direction with space between and centred alignment.
Output
Layout CSS distributing the items horizontally with equal gaps and centring them vertically.
Limitations
- The practical rule: Grid for two-dimensional layouts with rows and columns together, Flexbox for a single axis — and the tool generates what you choose without advising which suits your case.
- The code is for the container; the inner items' properties are set separately.
- The preview uses placeholder items, and your real content may behave differently depending on its sizes.
Privacy and processing
The layout code is produced on your device and nothing is sent to a server.
Technical notes
- Alignment values are labelled with their meaning rather than only their keyword, which addresses the part of these two properties people most often forget.