CSS Grid Generator
Configure columns, rows, gaps, and alignment options. Get the CSS and HTML instantly. Runs entirely in your browser.
Quick Presets
Grid Structure
Alignment
Live Preview
Generated CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
gap: 16px;
}
.grid-item {
background: rgba(108, 92, 247, 0.15);
border: 1px solid rgba(108, 92, 247, 0.3);
border-radius: 8px;
padding: 1rem;
}HTML Structure
<div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> <div class="grid-item">Item 5</div> <div class="grid-item">Item 6</div> </div>
Mastering CSS Grid Layout
📌 On this page
1. The core mental model: tracks and lines
CSS Grid works by defining a set of column tracks and row tracks on a container (grid-template-columns / grid-template-rows), which creates a numbered grid of lines you can place items against. Unlike Flexbox, which only reasons about one axis at a time, Grid reasons about both axes simultaneously — this is what makes it the right tool for overall page or component layout, where items need to align both horizontally and vertically in a coordinated structure, rather than just flowing in a single direction.
2. How to use this generator
Start from a preset that's close to what you need (Holy Grail for a classic header/sidebar/ footer page, 12-Col Grid for a Bootstrap-style layout system, 3-Col Cards for a product/blog grid), then fine-tune the column and row templates directly — the live preview updates instantly as you type. Adjust gap spacing, alignment, and the auto-flow setting, then copy the generated CSS directly into your stylesheet. The accompanying HTML structure shows exactly how many grid-item divs the current column × row configuration expects.
3. Common layout recipes
A classic "Holy Grail" layout (header, footer, and a three-column middle section) uses fixed sidebar widths with a flexible center: 200px 1fr 200px for columns, auto 1fr auto for rows. A responsive card grid that automatically wraps to available width uses repeat(auto-fill, minmax(240px, 1fr)) rather than a fixed column count — this single line replaces what would otherwise require several media query breakpoints. A 12-column system (repeat(12, 1fr)) mirrors familiar CSS framework grids and lets individual items span multiple columns using grid-column: span 4, for example.
4. Building responsive grids without media queries
One of CSS Grid's most powerful features is auto-fill/auto-fit combined with minmax() — this lets the browser calculate how many columns fit at the current viewport width without you writing a single @media breakpoint. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) creates as many 200px-minimum columns as fit, stretching them to fill any remaining space. This single declaration handles what used to require three or four separate breakpoint rules in older float or Flexbox-based grid systems.
5. Common mistakes to avoid
Forgetting that percentage-based row heights need an explicit container height to resolve against (grid rows sized in % don't work inside an auto-height container) is a frequent source of confusion. Overusing grid-auto-flow: dense on content where source order matters semantically can create a mismatch between visual order and DOM/reading order, which hurts accessibility. And mixing too many fixed-pixel tracks with fr units without minmax() protection can cause overflow on narrow viewports — always test your grid at your smallest supported breakpoint, not just the design width.
Frequently Asked Questions
What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system built into modern browsers. It lets you define rows and columns simultaneously and place items precisely within that grid — ideal for page layouts, card decks, dashboards, and image galleries.
What is the difference between CSS Grid and Flexbox?
Flexbox is one-dimensional — it arranges items in a row OR a column. CSS Grid is two-dimensional — it handles rows AND columns at the same time. Use Grid for overall page layout; use Flexbox for aligning items within a component.
What does repeat() and fr mean in CSS Grid?
repeat(3, 1fr) creates 3 equal columns that each take one fraction (fr) of the available space. It's equivalent to writing 1fr 1fr 1fr manually. The fr unit distributes remaining space proportionally after fixed-size columns are accounted for.
Is CSS Grid supported in all browsers?
Yes. CSS Grid has had full support in Chrome, Firefox, Safari, and Edge since 2017. It's safe to use in production for all modern browsers. WordPress themes from 2020+ typically support it natively.
What does grid-auto-flow: dense actually change?
By default, grid items are placed in source order, and if an item doesn't fit in the current row it moves to the next one, potentially leaving gaps. The "dense" packing algorithm backfills those gaps by placing later, smaller items into earlier empty cells when possible — useful for masonry-style layouts with mixed item sizes, but it can visually reorder content away from its source order, which may confuse keyboard and screen-reader navigation if not used carefully.
When should I use named grid-template-areas instead of grid-template-columns/rows?
Named template areas (defined with grid-template-areas: "header header" "sidebar content" "footer footer") are ideal when your layout has a fixed, semantic structure — a classic page layout with header/sidebar/content/footer benefits from area names that make the CSS self-documenting. Column/row templates with repeat() and fr units are better suited for uniform, repeating structures like card grids or image galleries where every cell plays the same role.
Why is my grid-template-columns value not producing equal-width columns?
This usually happens when mixing fr units with fixed-width or content-sized (auto) columns without accounting for their interaction — fr units divide only the space remaining after fixed and auto-sized tracks are accounted for, not the full container width. If you want strictly equal columns regardless of content, use repeat(N, 1fr) with no fixed-width tracks mixed in, or repeat(N, minmax(0, 1fr)) to prevent content from forcing a column wider than its fair share.