CSS Grid Generator
Visually build CSS Grid layouts by defining rows, columns, gaps, and alignment. Copy clean, production-ready grid code.
How to Use
- Define your grid structure: set the number of columns and rows, then adjust their sizes using flexible units (fr, px, %, auto, minmax). Drag the dividers or use the input fields to add and remove tracks visually.
- Configure grid spacing: set `column-gap` and `row-gap` (or the shorthand `gap`), adjust `justify-items` and `align-items` for cell-level alignment, and set `justify-content` and `align-content` for overall grid positioning within its container.
- Copy the generated CSS — you get a complete CSS grid rule. Optionally copy the child item placement rules if you've configured named grid areas or specific `grid-column` / `grid-row` spans for each item.
Frequently Asked Questions
- What's the `fr` unit and when should I use it?
- The `fr` (fraction) unit distributes available space proportionally. For example, `grid-template-columns: 1fr 2fr 1fr` creates three columns where the middle is twice as wide as the sides. Unlike percentages, `fr` units automatically account for gaps and never cause overflow — they're the recommended unit for responsive grid layouts.
- How is CSS Grid different from Flexbox?
- CSS Grid is a two-dimensional layout system (rows AND columns simultaneously). Flexbox is one-dimensional (either a row OR a column). Use Grid for page layouts, card grids, and complex arrangements. Use Flexbox for navigation bars, centering content, and distributing items along a single axis. They work great together — Grid for the macro layout, Flexbox for micro components.
- Can I create responsive grids that work on mobile?
- Yes — combine `repeat(auto-fit, minmax(250px, 1fr))` to create grids that automatically adjust the number of columns based on available width. Without media queries, items will wrap to fewer columns on narrow screens. The generator's 'Auto-fit' preset demonstrates this pattern.