CSS Grid Generator
Create responsive grid layouts with visual controls and instant CSS code.
CSS Grid Generator
Create responsive grid layouts with visual controls
Grid Settings
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px 10px;
}Live Preview
Quick Presets
CSS Grid Quick Reference
Define your grid structure using the column and row controls. Use fr units for flexible proportional columns, px for fixed-width columns, or auto to let content determine the size.
Set the gap between cells. CSS Grid's gap property (formerly grid-gap) controls spacing between rows and columns without adding margin to the outer edges of the container.
Copy the generated CSS and paste it into your stylesheet. The output uses standard CSS Grid properties compatible with all modern browsers without any prefixes needed.
Key CSS Grid Properties
| Property | Example value | What it does |
|---|---|---|
| display | grid | Activates grid layout on the container |
| grid-template-columns | repeat(3, 1fr) | Defines 3 equal-width columns |
| grid-template-rows | 200px auto | First row is 200px, second sizes to content |
| gap | 16px | Sets equal gap between rows and columns |
| column-gap / row-gap | 20px 10px | Sets different horizontal and vertical gaps |
| grid-column | span 2 | Makes a child span 2 columns |
| grid-row | 1 / 3 | Places a child from row line 1 to 3 |
| justify-items | center | Aligns children horizontally within their cells |
| align-items | start | Aligns children vertically within their cells |
| grid-template-areas | "header header" "sidebar main" | Names grid areas for semantic placement |
CSS Grid vs Flexbox: When to Use Each
Flexbox is one-dimensional — it lays out items along a single axis (row or column). CSS Grid is two-dimensional — it manages both rows and columns simultaneously. Use Flexbox for navigation bars, button groups, card rows where items wrap naturally, and any component where content determines layout. Use CSS Grid for full-page layouts, multi-column article designs, image galleries, dashboards, and any design where you need precise control over both axes at once. In practice, most modern layouts use Grid for the macro page structure and Flexbox for micro-component alignment within grid cells. The two systems complement each other and can be nested freely.
Frequently Asked Questions
Common questions about CSS Grid Generator