Developer Layout Utility
CSS Grid Generator
Test columns, rows, gap, minmax, auto-fit, and alignment options in real time, then generate CSS Grid code instantly.
Grid Settings
Set the columns, rows, spacing, alignment, and item count for your Grid container.
Choose between a regular repeat layout, responsive auto-fit layout, or custom template mode.
Used in auto-fit minmax mode.
Used in custom template mode. Examples: 240px 1fr 1fr, minmax(180px, 1fr) 2fr
Generated Result
CSS code based on the current Grid settings.
Change the Grid settings, then click the Generate CSS Code button.
Grid Usage Comparison
Choose repeat, auto-fit, or custom template depending on your layout goal.
Repeat Columns
Repeat Columns
Repeat Columns
Help
What is a CSS Grid Generator?
A CSS Grid Generator is a developer utility that lets you experiment with Grid layouts in real time and automatically generate grid-template-columns, gap, minmax, and auto-fit CSS code.
It can be used for card lists, image galleries, admin dashboards, utility lists, blog lists, and landing page section layouts.
Features
- Generate fixed-column Grid layouts based on repeat
- Generate responsive Grid layouts based on auto-fit minmax
- Enter custom grid-template-columns manually
- Adjust column gap, row gap, and item height
- Set justify-items and align-items alignment
- Adjust container padding and item radius
- Preview in real time and copy or download CSS code
What is the difference between repeat and auto-fit?
repeat(3, 1fr) always keeps three columns. repeat(auto-fit, minmax(220px, 1fr)) automatically adjusts the number of columns based on the screen width.
When should I use auto-fit minmax?
It is useful for layouts that should wrap naturally depending on screen size, such as card lists, product lists, and image galleries. It is one of the most common Grid patterns for responsive pages.
When should I use a custom template?
Use a custom template when you need layouts such as 240px 1fr for a sidebar and main content, or 1fr 2fr 1fr for columns with different proportions.
What is the difference between gap and padding?
gap controls the space between Grid items, while padding controls the inner spacing of the Grid container. In card lists, gap is used between cards and padding controls the outer container spacing.
Can I use the generated CSS directly?
The generated code is basic Grid layout code. When applying it to a real project, also check the parent width, responsive breakpoints, and card content length.