Who this helps
- Developers building card lists
- Designers comparing two-dimensional layouts
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.
Generate Grid Layouts
Quickly create card-style Grid layouts by adjusting columns, rows, gap, and minmax values.
Live Preview
Instantly preview Grid placement, spacing, item height, and alignment as settings change.
Copy CSS Code
Copy generated grid-template, gap, align-items, and justify-items code or save it as a CSS file.
Grid Settings
Set the columns, rows, spacing, alignment, and item count for your Grid container.
Quick Presets
Apply frequently used Grid patterns instantly.
Choose between a regular repeat layout, responsive auto-fit layout, or custom template mode.
1
3
8
1
2
6
2
6
24
0px
18px
60px
0px
18px
60px
120px
220px
360px
Used in auto-fit minmax mode.
80px
120px
220px
0px
24px
60px
0px
20px
40px
Used in custom template mode. Examples: 240px 1fr 1fr, minmax(180px, 1fr) 2fr
Live Preview
Mode
repeat
Columns
3
Gap
18px / 18px
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
auto-fit minmax
Repeat Columns
custom template
Repeat Columns
Choose a Grid mode that fits the content
Generate fixed-column, auto-fit or custom CSS Grid layouts. Compare spacing and alignment in the preview, then test the CSS with real text and images.
When to use this tool
- Build a responsive card collection.
- Try a sidebar beside a flexible content area.
From input to a checked result
- 1
Select fixed columns, auto-fit or custom columns.
- 2
Set column count or minimum card width.
- 3
Adjust row height, gaps, padding and alignment.
- 4
Use the preview to compare the layout at different widths.
- 5
Generate CSS, apply the container and item classes and test actual content.
Responsive cards
- Input
- auto-fit; minimum width 220px; gap 20px
- Result
- repeat(auto-fit, minmax(220px, 1fr))
Below the minimum width plus padding, additional responsive rules may be needed.
Sidebar and content
- Input
- custom: 260px minmax(0, 1fr)
- Result
- A 260px track and a flexible track.
The flexible track can shrink, but the fixed sidebar still needs a mobile strategy.
How it works
The tool builds grid-template-columns from the mode and exports row sizing, gaps, alignment, padding and radius. Custom columns are limited to 200 characters, reject declaration delimiters and are checked with CSS.supports when available.
Limitations
- Numbered preview items do not model long text or intrinsic image sizes.
- It does not automatically generate breakpoint rules or accessible reading order.
- Advanced grid areas and parent/child subgrid layouts are not assembled by dedicated controls.
Your data
Layout values and custom CSS tracks are processed locally.
References
Related tools
- Flexbox Playground
Center an empty-state component.
- Glassmorphism Generator
Style a card over a patterned background.
Frequently asked questions
Does auto-fit guarantee no mobile overflow?
No. A minimum track wider than its container can still overflow. Test padding and real content.
Why is custom input rejected?
Use a grid-template-columns value, not a complete declaration or stylesheet.
Are extra rows included?
Fixed mode generates explicit rows; additional items use the configured grid-auto-rows height.