How it works
The CSS Grid Generator provides a visual interface for designing CSS Grid layouts — define rows, columns, gaps, and item placements using a drag-and-drop canvas, then copy the generated CSS Grid declarations.
CSS Grid is the standard two-dimensional layout system. It lets you define a grid of rows and columns, then place elements precisely within that grid — enabling complex layouts that were impossible or hacky in older CSS models. The Grid Generator makes this visual rather than requiring manual calculation of grid-template-columns values.
How to use it: add columns using the + button (set width as px, fr, %, or auto) and add rows (set height similarly). The canvas shows the resulting grid. Click cells to span multiple grid areas and assign them to elements. Set gap (column-gap and row-gap) for spacing. Copy the CSS for the container (grid-template-columns, grid-template-rows, gap) and for individual items (grid-column, grid-row spans).
fr unit explained: the fr (fraction) unit distributes remaining space proportionally. A grid with columns 1fr 2fr 1fr gives the middle column twice the width of each side column, all scaling fluidly with the container width — no fixed pixel values needed.
Common patterns: 12-column grid (repeat(12, 1fr)) for editorial layouts, holy grail layout (header / sidebar + main + sidebar / footer), card grid (repeat(auto-fill, minmax(280px, 1fr)) for responsive cards), and magazine layout with varying-height article cards placed in named grid areas.
Frequently Asked Questions
- fr (fraction unit) distributes available space proportionally. In a 3-column grid with 1fr 2fr 1fr, the middle column gets twice the width of each side column. All fr values are resolved after fixed-width columns and gaps have taken their space.
- This creates as many columns as will fit, each at least 280px wide, expanding to fill space equally. It's the standard pattern for responsive card grids — cards automatically go from 1 column on mobile to 4+ columns on wide screens with no media queries.
- auto-fill creates as many columns as possible, leaving empty column tracks at the end. auto-fit collapses empty tracks and stretches existing items to fill the space. auto-fit is usually preferred for responsive card layouts.
- Set grid-column: span 2 (or span 3) on the item. The tool's click-to-span interface lets you drag-select cells in the grid preview to define exactly which grid area an item should occupy.