CSS Grid Generator

What is CSS Grid?

CSS Grid is the layout system built for two-dimensional designs — rows and columns at once, unlike Flexbox which lays items out along a single axis. Turning any element into a grid takes one declaration, display: grid;, plus a description of the tracks it should have. This tool generates that declaration for the most common case: an evenly-divided grid of equal-width columns and equal-height rows, with consistent spacing between cells.

The properties this tool generates

• display: grid; — turns the element into a grid container; its direct children automatically become grid items.
• grid-template-columns: repeat(N, 1fr); — creates N columns, each taking an equal fraction (1fr) of the available width. repeat() is shorthand for writing 1fr N times.
• grid-template-rows: repeat(M, 1fr); — the same idea applied to rows: M equal-height rows.
• gap: Npx; — the space between both rows and columns, replacing the old grid-row-gap/grid-column-gap pair with a single shorthand.

How to use this tool

1. Drag the Columns slider to set how many equal-width columns the grid should have (1–12).
2. Drag the Rows slider to set how many equal-height rows it should have (1–12).
3. Drag the Gap slider to set the spacing, in pixels, between grid cells.
4. Copy the generated CSS from the CSS box, or download it as a .css file, and apply it to your container element — for example, .grid-container { ...generated CSS... }.

The output updates instantly as you move any slider — there's no separate "generate" step.

FAQ

Do I need to add anything to the child elements? No. Once the parent has display: grid; and template tracks, direct children are placed automatically, filling cells left-to-right, top-to-bottom. You only need extra CSS on a child if you want it to span multiple cells (grid-column: span 2;) or sit in a specific spot.

What does 1fr mean? fr stands for "fraction" — a unit unique to Grid. 1fr means "one share of whatever space is left after fixed-size tracks and gaps are accounted for." Since every column here uses 1fr, the available width splits evenly across all of them, and the grid resizes automatically with the container.

Can I make columns different widths, like 200px 1fr 200px? This tool focuses on the equal-column/equal-row case, which covers most grid layouts (image galleries, card grids, dashboards). For mixed fixed/flexible tracks, replace the generated repeat(N, 1fr) value with your own space-separated size list (200px 1fr 200px) — the rest of the declaration works unchanged.

What's the difference between gap and margin/padding? gap only adds space between grid cells — it never adds space around the outer edge of the grid container the way margin or padding would. That makes it the more predictable choice for consistent internal spacing.

Is CSS Grid supported in all browsers? Yes. display: grid and the properties this tool generates have been supported, unprefixed, in every major browser since 2017.

Privacy

Everything happens in your browser. No CSS, values, or settings you enter are ever sent to a server — the declaration is generated and updated locally as you adjust the sliders.