CSS Grid Generator
Build CSS Grid layouts visually. Define columns, rows, and gaps, then copy the generated code.
Grid Properties
Column Sizing
Row Sizing
Alignment
Generated CSS
How to Use the CSS Grid Generator
Use the sliders to set the number of columns and rows. Adjust the gap between grid tracks and customize the size of each column and row using the unit selectors. The preview updates in real time, and you can copy the resulting CSS with one click.
What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system that lets you control both columns and rows simultaneously. It is ideal for building page layouts, card grids, dashboard interfaces, and any design that requires precise control over both axes.
Grid vs. Flexbox
Grid is best for two-dimensional layouts where you need to align content in both rows and columns. Flexbox is best for one-dimensional layouts. In practice, most pages use both: Grid for the overall page structure and Flexbox for component-level alignment. Try our Flexbox Generator for flex layouts.
Common Grid Patterns
- Holy Grail Layout: Header, footer, sidebar, content, and aside using grid-template-areas.
- Auto-fill cards:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))for responsive card grids. - Asymmetric layouts: Mix fr units with fixed widths for sidebar + content patterns.