Runs locally
Grid Generator
Columns, rows and gap as CSS Grid.
1
2
3
4
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 12px;
Export and import are available after you sign in. Sign in
Copies a grid template you can paste into a stylesheet.
About this tool
Build a simple CSS grid for cards, galleries or dashboards. Choose how many columns you need and the gap between them, check the preview and copy the CSS.
How to use it
- 01
Set the number of columns.
- 02
Set the gap.
- 03
Copy the grid CSS.
FAQ
Frequently asked questions
What does the generated CSS contain?
display: grid with a grid-template for the columns and rows and the gap you chose.
How do I make it responsive?
Change the column count in a media query, or use repeat(auto-fit, minmax(…)) in your own CSS.