CSS Grid Generator
Generate fixed-column or responsive auto-fit CSS Grid layouts with adjustable gaps, minimum card widths and a live numbered-cell preview.
Set your values
Adjust the values, then calculate your result.
How to use CSS Grid Generator
- Choose responsive auto-fit or a fixed column count.
- Set gap and minimum card width, then generate the layout.
- Resize the page to inspect the preview and copy the CSS into your component.
Build the container rule and inspect real browser layout
Fixed mode uses equal minmax(0, 1fr) tracks. Responsive mode combines auto-fit with a minimum card width, allowing the browser to choose how many columns fit. The minimum is bounded by 100% so a narrow container can still contain one card. The preview uses actual CSS Grid rather than a static illustration.
Adapt the generated rule to your content
The snippet targets .grid and its direct children. Preview count changes only the demonstration, not the emitted layout rule. Long unbroken text, images and custom child styles may need additional wrapping or sizing in your application. This is a column-layout starter rather than a visual editor for named areas, arbitrary item spans or a full design system.
Why can responsive mode show fewer columns than the fixed count?
Responsive mode ignores the fixed count and uses the available container width, minimum card width and gap to decide the track count.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.