CSS Grid is the most powerful layout system in CSS — designed for two-dimensional layouts with rows and columns simultaneously. A grid generator lets you define columns, rows, gaps, and placement visually and export clean CSS.
Build CSS Grid Layouts Visually
Define rows, columns, gaps, and item placement. Live preview + copy CSS.
CSS Grid Basics
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: auto;
gap: 1rem;
}| Property | What It Does | Example |
|---|---|---|
| grid-template-columns | Define column widths | 1fr 2fr 1fr, repeat(3, 1fr) |
| grid-template-rows | Define row heights | auto, 100px 200px |
| gap | Space between cells | 1rem, 16px |
| grid-column | Item column span | 1 / 3 (spans 2 cols) |
| grid-row | Item row span | 1 / 3 (spans 2 rows) |
The fr Unit Explained
fr (fraction) distributes available space proportionally:
grid-template-columns: 1fr 2fr 1fr;
/* Left: 25% | Center: 50% | Right: 25% */
grid-template-columns: 200px 1fr;
/* Sidebar: fixed 200px | Content: rest */
grid-template-columns: repeat(3, 1fr);
/* 3 equal columns */fr accounts for gaps automatically; percentages don't. 3 columns of 33.33% + gaps overflow the container. 3 columns of 1fr + gaps fit perfectly. Always prefer fr over percentages in Grid.
auto-fill vs auto-fit: Responsive Grids Without Media Queries
/* Responsive grid: cards fill available space, min 250px each */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}| Property | Behaviour |
|---|---|
| auto-fill | Creates as many columns as fit, empty columns remain |
| auto-fit | Creates as many columns as fit, collapses empty columns |
For most card grids, auto-fill and auto-fit behave identically. The difference only matters when you have fewer items than available columns.
Named Grid Areas for Page Layouts
.page {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }Named areas make complex layouts readable and easy to rearrange for responsive breakpoints.
Common Grid Patterns
Holy Grail Layout
grid-template: auto 1fr auto / 200px 1fr 200px;Masonry-like (equal columns, varying heights)
grid-template-columns: repeat(3, 1fr);
/* Items naturally fill rows, creating masonry effect */Dashboard with Spanning Widgets
.grid { grid-template-columns: repeat(4, 1fr); }
.widget-large { grid-column: span 2; grid-row: span 2; }
.widget-wide { grid-column: span 2; }Grid vs Flexbox: Decision Guide
| Question | Answer → Use |
|---|---|
| One direction only? | Yes → Flexbox |
| Rows AND columns matter? | Yes → Grid |
| Content size drives layout? | Yes → Flexbox |
| Layout drives content placement? | Yes → Grid |
| Aligning items in a navbar? | Flexbox |
| Building a page template? | Grid |
Most real projects use both. Grid for page structure, Flexbox for components inside grid cells.
Subgrid: Aligning Nested Grids (2026)
Subgrid lets a child grid inherit its parent's track lines — solving the age-old problem of aligning columns across nested components.
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.child {
display: grid;
grid-template-columns: subgrid; /* Inherits parent's 3 columns */
grid-column: 1 / -1; /* Spans all parent columns */
}Browser support: Chrome 117+, Firefox 71+, Safari 16+. This is a game-changer for card grids where card content (title, description, price, button) needs to align across cards.
Card grids where each card has multiple rows of content that should align vertically across all cards — titles at same height, prices at same height, buttons at same height. Without subgrid, this requires fixed heights or JavaScript.
How to Use the Tool (Step by Step)
- 1
Open the Generator
Navigate to CSS Grid Generator on ToolsArena.
- 2
Define Columns and Rows
Set the number and size of columns (fr, px, %) and rows.
- 3
Set Gaps
Adjust row and column gap spacing.
- 4
Place Items
Drag items to span multiple columns or rows.
- 5
Copy CSS
Copy the generated grid CSS and item placement rules.
Frequently Asked Questions
What is CSS Grid?+−
CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously. Unlike Flexbox (one-dimensional), Grid lets you place items in precise row/column positions and create complex page layouts.
What does fr mean in CSS Grid?+−
fr (fraction) distributes available space proportionally. 1fr 2fr 1fr creates three columns where the middle is twice as wide. fr accounts for gaps automatically, unlike percentages.
What is the difference between auto-fill and auto-fit?+−
Both create responsive grids. auto-fill keeps empty column tracks; auto-fit collapses them. In practice, they behave identically when you have enough items to fill all columns — which is most use cases.
Should I use Grid or Flexbox?+−
Use Grid for two-dimensional page layouts (header/sidebar/content/footer). Use Flexbox for one-dimensional component layouts (navbars, card rows, button groups). Most projects use both — Grid for structure, Flexbox for components.
How do I make a responsive grid without media queries?+−
Use: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); — this creates as many 250px+ columns as fit the viewport, automatically adapting from 1 to many columns.
What are named grid areas?+−
Named areas let you assign readable names to grid regions: grid-template-areas: "header header" "sidebar content" "footer footer"; — then place items with grid-area: header;. This makes complex layouts extremely readable.
Is this tool free?+−
Yes. Build unlimited Grid layouts visually. Copy CSS instantly.
Build CSS Grid Layouts Visually
Define rows, columns, gaps, and item placement. Live preview + copy CSS.
Open Grid Generator →Related Guides
CSS Flexbox Generator Guide
Build CSS Flexbox layouts visually. Understand flex-direction, justify-content, align-items, flex-wrap, gap, and responsive patterns with live preview.
Box Shadow Generator Guide
Create beautiful CSS box-shadow effects visually. Learn shadow anatomy, layered shadows, material design elevations, and performance tips.
Tailwind CSS Playground Guide
Experiment with Tailwind utility classes, see live preview, and copy the HTML — perfect for learning and prototyping.