CSS Grid Generator

Columns, rows, gaps and responsive cards with live preview

Error

Check the grid settings.

Live Preview

The grid updates as you change columns, sizes and gaps.

Responsive Cards

The auto-fit mode wraps cards onto new rows on small screens without media queries.

Spanning Items

Make the first item span several columns or rows, a common hero-card pattern.

Private

Everything runs in your browser; nothing you paste is uploaded.

CSS Grid in Brief

grid-template-columns: repeat(3, 1fr) creates three equal columns, where fr is a fraction of the free space. Tracks can also be fixed (200px), content-sized (auto) or flexible with limits (minmax(150px, 1fr)). gap sets the space between tracks without adding margins to the items, and grid-column: span 2 lets one item cover two columns.

The responsive pattern repeat(auto-fit, minmax(min(200px, 100%), 1fr)) fits as many columns as there is room for, each at least 200px wide, and stretches them to fill the row; the inner min() stops a card overflowing on screens narrower than 200px. Use Grid for two-dimensional layouts and Flexbox for one-dimensional rows of content.

Key Takeaways

fr units: Share free space proportionally between tracks.
gap, not margin: Gaps never appear on the outer edges.
auto-fit for cards: Responsive without a single media query.

Related Tools

CSS clamp() Generator

Enter a minimum and maximum size and the viewport range to get a clamp() value with rem and vw, a size table for common breakpoints.

CSS Gradient Generator

Build a linear or radial CSS gradient with a live preview, then copy the generated CSS.

CSS Box Shadow Generator

Build a CSS box-shadow with adjustable offset, blur, spread, color, and opacity, with a live preview.

Learn more

Cheat sheet

CSS Quick Reference Cheat Sheet

CSS units, shorthands, shadows, gradients, clamp() fluid type, grid one-liners, easing curves, specificity and contrast.

CSS Grid Generator - Build Grid Layouts Visually and Copy the CSS