CSS Grid Generator
Create grid layouts visually, including responsive card grids that need no media queries.
Runs in your browser. Nothing is uploaded Free, no sign-up Works on mobile
1
2
3
4
5
6
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Columns
Column size
Rows
Row size
Gap: 16px
How to use CSS Grid Generator
- Set the number of columns and rows, or choose responsive columns.
- Adjust the gap and track sizes.
- Copy the CSS.
Frequently asked questions
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). Columns are added or removed as the screen width changes.
What does 1fr mean?
One fraction of the free space. Three 1fr columns share the width equally.
Related tools
All Developer Tools →- Flexbox Playground Understand flexbox by changing properties and watching the items move.
- CSS Gradient Generator Design gradient backgrounds visually and copy the CSS.
- JSONPath Tester Write and debug JSONPath queries used in API tests, Postman, Kubernetes and data pipelines.
- User Agent Parser Find out which browser, OS and device a user agent string belongs to, for debugging and analytics.
- HTTP Status Codes Look up what an HTTP status code means and what usually causes it.
- Chmod Calculator Work out the right chmod value for files and folders on Linux servers.