CSS Grid Generator: Build Two-Dimensional Layouts Visually
CSS Grid handles rows and columns simultaneously, which makes it powerful but also gives it more moving parts than Flexbox — track sizing, row and column gaps, per-axis item alignment. This generator lets you dial in a grid visually and copy clean, ready-to-use CSS instead of hand-writing repeat() expressions from scratch.
fr units divide available space proportionally after fixed tracks and gaps are subtracted.
Why fr Units Instead of Percentages
Percentage-based columns have to account for gaps manually (a 3-column layout with 20px gaps isn't cleanly 33.33% each), while fr units automatically divide whatever space remains after gaps are subtracted. This is why repeat(3, 1fr) with any gap value produces evenly-sized columns without extra math.
Per-Item Alignment vs. Container Alignment
justify-items and align-items in Grid control how each item sits within its own cell — useful when a cell is larger than its content. This is different from Flexbox's justify-content, which distributes space between items as a group rather than positioning content within individually-sized cells.
When a Uniform Grid Isn't Enough
This generator covers the common case: a regular grid of equal-sized cells. Real layouts sometimes need irregular tracks (a sidebar that's 250px fixed next to a flexible main area) or named grid-template-areas for semantic layout regions — both are natural next steps once you have a working uniform grid as a starting point.
Practical Examples
A Photo Gallery Grid
Equal-sized thumbnails in a responsive grid.
- 1.Columns: 4, Rows: 3
- 2.Gap: 12px
- 3.grid-template-columns: repeat(4, 1fr)
A Dashboard Layout
A 2x2 grid of widget cards.
- 1.Columns: 2, Rows: 2
- 2.Gap: 24px
- 3.align-items: stretch (default) for equal-height cards
Properties This Generator Covers
- grid-template-columns/rows: uniform fr-based tracks
- gap (or column-gap/row-gap when different)
- justify-items: horizontal per-item alignment
- align-items: vertical per-item alignment
Good Use Cases
- Prototyping a photo gallery or card grid layout
- Learning how fr units distribute space
- Quickly testing different column/row counts visually
- Generating a clean starting point to extend with spanning items
Frequently Asked Questions
Why does the generated CSS use repeat() instead of listing 1fr multiple times?
repeat(3, 1fr) and 1fr 1fr 1fr produce identical results, but repeat() stays readable and easy to adjust as the column count grows — it's the conventional way to express a uniform grid.
What does the fr unit mean?
fr stands for 'fraction' — it represents a share of the available space in the grid container, after fixed-size tracks and gaps are accounted for. 1fr 2fr means the second column gets twice the space of the first.
What's the difference between column-gap/row-gap and gap?
gap is shorthand for row-gap and column-gap together. This generator uses the combined gap when both values are equal (cleaner output) and falls back to separate column-gap/row-gap declarations when they differ.
What do justify-items and align-items control in Grid?
justify-items controls how each item is positioned horizontally within its grid cell (start/end/center/stretch). align-items controls the same thing vertically. These differ from Flexbox's justify-content/align-items, which position the whole set of items rather than each item within its own allocated cell.
Does this generator support named grid areas or spanning items?
No — it generates a uniform grid (equal fr tracks) for the common case of a regular grid layout. Named template areas and grid-column/grid-row spans are a more advanced pattern you'd add manually for irregular layouts.
When should I use Grid instead of Flexbox?
Grid excels at two-dimensional layouts — controlling both rows and columns simultaneously, like a photo gallery or dashboard. Flexbox is generally simpler and better suited for one-dimensional layouts, like a single row of navigation items or a vertical stack.