CSS Grid Generator
Build CSS Grid layouts visually. Configure rows, columns, gaps, and alignment, then copy the generated CSS.
Grid Settings
Live Preview
Generated CSS
What is CSS Grid?
CSS Grid Layout is a powerful two-dimensional layout system that lets you design web pages using rows and columns simultaneously. Introduced as a W3C specification, it provides precise control over element placement and sizing without resorting to floats, tables, or complex positioning hacks.
This tool lets you visually configure a CSS Grid container and instantly see the result. Adjust columns, rows, gaps, and alignment, then copy the generated CSS into your project. All calculations happen in your browser — nothing is sent to a server.
CSS Grid Properties Reference
| Property | Description |
|---|---|
| display: grid | Defines a grid container |
| grid-template-columns | Sets column track sizes |
| grid-template-rows | Sets row track sizes |
| gap | Shorthand for row-gap and column-gap |
| justify-items | Aligns items on the inline (row) axis |
| align-items | Aligns items on the block (column) axis |
| justify-content | Aligns the grid within the container horizontally |
| align-content | Aligns the grid within the container vertically |
| grid-column | Shorthand for grid-column-start / end |
| grid-row | Shorthand for grid-row-start / end |
| grid-area | Shorthand for row-start / col-start / row-end / col-end |
| grid-auto-flow | Controls auto-placement algorithm (row, column, dense) |
CSS Grid vs. Flexbox
CSS Grid
- Two-dimensional — controls rows and columns simultaneously
- Best for page-level layouts — headers, sidebars, content areas
- Excels at explicit placement — position items by grid line or area
- Handles asymmetric layouts where items span multiple tracks
Flexbox
- One-dimensional — controls a single axis (row or column)
- Best for component-level layouts — navbars, card rows, buttons
- Excels at content-driven sizing — items grow and shrink naturally
- Simpler for centering and distributing space
In practice, Grid and Flexbox complement each other. Use Grid for the overall page structure and Flexbox for arranging content within individual components.
Common CSS Grid Layouts
Holy Grail Layout
A classic web layout with a header, footer, main content area, and two sidebars. Use grid-template-columns: 200px 1fr 200px with three rows for the header, content, and footer.
Sidebar Layout
A two-column layout with a fixed-width sidebar and a flexible main area. Use grid-template-columns: 250px 1fr to keep the sidebar at 250px while the content area fills the remaining space.
Dashboard Grid
A multi-column grid for data panels and widgets. Use equal 1fr columns with consistent gaps for a clean, organized look. Items can span multiple columns or rows for emphasis.
Responsive Gallery
Use repeat(auto-fill, minmax(250px, 1fr)) to create a gallery that adapts to any screen size without media queries. Items wrap automatically as the viewport narrows.