CSS Grid Generator

CSS Grid is the two-dimensional layout system in modern CSS: you describe rows and columns at once and let the browser place items into that structure. This generator gives you sliders for tracks and gaps, a live preview, three named-area presets, and clean CSS you can copy straight into a stylesheet. It is aimed at the first 80 percent of a grid — equal columns, even gaps, and a simple region diagram — so you can start a layout in seconds instead of hand-typing template strings.

How to Use

1. Drag the columns and rows sliders (1–12 each) or type a number in the box beside each one. The preview redraws on every change.
2. Set column-gap and row-gap independently, from 0 to 48 pixels. Because they are separate properties, you can use tight column gutters and generous row spacing.
3. Optionally tick named areas and choose a preset — Holy Grail, Sidebar, or Cards. The sliders lock to the preset’s dimensions.
4. Copy the .container block. With named areas on, also copy the .area-name rules the generator appends.

Worked Examples

Example A — a four-by-two card grid. Columns 4, rows 2, column-gap 16, row-gap 12 produces:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 12px;
}

Example B — the Holy Grail preset. Enabling named areas and selecting Holy Grail switches the track count to 3 x 3 and appends a diagram:

grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";

The generator then emits one rule per region, such as .header { grid-area: header; }. Any direct child you give that class is placed automatically, and main stretches across the single middle cell while the header and footer span all three columns.

Reading the Generated CSS

Three declarations carry most of the meaning. display: grid turns the element into a grid container. grid-template-columns and grid-template-rows define the tracks; repeat(n, 1fr) means n equal fractions of the leftover space. The fr unit does not mean “one nth of the container” in a naive sense — gaps are subtracted first, then the remainder is split. For a 1200px container with three columns and 16px column gaps, the gaps consume 32px and each 1fr resolves to (1200 - 32) ÷ 3 ≈ 389.3px. grid-template-areas is a visual map: repeated names merge cells into one region, and a dot leaves a cell empty.

Tracks vs Named Areas: Which to Use

Situation	Better choice	Why
Uniform card gallery, item count unknown	Plain tracks	Track count is the only decision; items wrap naturally when you add media queries
Page skeleton with header/sidebar/footer	Named areas	The diagram documents the layout and survives reordering
One feature block spanning two columns and two rows	Named areas	Repeating a name merges cells, which is hard to express with equal 1fr tracks alone
You need mixed fixed and flexible widths	Start with tracks, then edit	The generator only emits 1fr; replace individual tracks by hand

Common Mistakes

• Assuming gaps shrink the tracks automatically. They do, but only if your grid items can shrink. A min-width on a card can force a track wider than 1fr and cause horizontal overflow across 10–12 columns; swap in minmax(0, 1fr) when that happens.
• Styling grandchildren. Grid placement applies to direct children only. A wrapper <div> between the container and the cards breaks the intended layout.
• Renaming an area in the diagram but not the class. The .header rule and the "header header header" string must match exactly; a typo silently leaves an item unplaced.
• Forgetting that named areas reorder without moving HTML. Visual order and source order diverge, which matters for keyboard tab order and screen readers — check accessibility if the visual order changes meaning.
• Expecting the preview to be responsive. The demo grid is fixed; real responsiveness still needs @media rules or auto-fit/minmax, which this generator does not produce.

Accuracy and Limits

The output uses standard, widely supported grid properties, and zero gaps are omitted so the CSS stays lean. What you will not get: auto-fit, auto-fill, minmax(), subgrid, per-item span controls, or generated media queries. Track counts always resolve to equal fractions, and gaps cap at 48px. Treat the result as a correct, readable starting point rather than a finished responsive layout.

Responsive Behavior You Still Need to Add

The generator emits a fixed track count, not a container query. A four-column desktop grid will squeeze cards uncomfortably at 375px unless you add breakpoints yourself. A common pattern is to keep the generated block as the desktop base and layer progressively simpler grids below it:

@media (max-width: 900px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .container { grid-template-columns: 1fr; }
}

An alternative that needs no media queries is grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)), which fits as many 220px-minimum columns as the container allows and wraps the rest. It is more resilient to unknown item counts, but the tool does not generate it. For a card gallery fed by a CMS, prefer the auto-fit form; for a page skeleton with named regions, keep the explicit tracks and add one breakpoint that stacks the regions into a single column.

Related Tools

• CSS Flexbox Generator — Design one-dimensional flexbox layouts with live preview.
• CSS Box Shadow Generator — Design layered box shadows with live preview.
• CSS Gradient Generator — Build custom CSS gradients for your layouts.