CSS Grid and Flexbox Generator
Set rows, columns, alignment, and gaps visually, then copy a small HTML and CSS example.
px
The preview boxes have different heights so you can see the alignment.
Your result
Choose a layout to see it.
How to use it
- Choose grid or flex.
- Set the columns, the gap, and the vertical alignment.
- Copy the CSS for the container and, for flex, its items.
Examples
- Three-column gridGrid, 3 columns, gap 16 grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
- Three per flex rowFlex, 3 columns, gap 16 .container > * { flex: 0 0 calc((100% - 32px) / 3); }
Tool details and privacy
Set up a CSS grid or flex row with columns, a gap, and alignment, watch the boxes move, and copy the CSS.
The preview boxes have different heights, so you see exactly what each setting does.
Options
- 1 to 6 columns, gap 0 to 80 px, alignment stretch, centre, or top.
Limits
- This is the layout CSS only, not a full page.
- Responsive breakpoints are not added.
Privacy
What you type stays in your browser. Nothing is uploaded or saved on the server.
Questions
What does a 3-column grid use?
repeat(3, minmax(0, 1fr)).
How do flex items share a row?
Each gets flex: 0 0 with an equal share of the row.
Does it write the HTML?
No. It copies the CSS.
Is anything uploaded?
No.