This CSS Grid Generator lets you build a grid layout visually and export production-ready code without hand-writing every track by hand. You set the number of columns and rows, dial in the gap between cells, and the tool assembles the matching grid-template-columns, grid-template-rows and gap declarations for you to copy straight into your stylesheet.
Under the hood, a CSS grid is created by setting display: grid on a container and defining its tracks. Columns and rows are usually expressed with the fr unit, a flexible fraction of the leftover space — repeat(3, 1fr) means three equal columns. The gap property (formerly grid-gap) adds consistent gutters between tracks without margins that collapse or leak past the grid edges.
Because Grid is a two-dimensional layout system, it handles rows and columns at the same time, which is what makes it stronger than Flexbox for page-level and card-based layouts. This grid layout tool removes the trial-and-error of counting fractions and remembering syntax, so you can iterate on structure first and paste working CSS second.
Building your layout
- 1
Set the column count to define how many vertical tracks your grid has — each one is emitted as an equal 1fr fraction inside a repeat() function.
- 2
Set the row count to add horizontal tracks; leave it low if you want rows to be created implicitly as content flows in.
- 3
Adjust the gap slider to control the gutter between cells, typically in px or rem, which maps to the single gap property.
- 4
Preview the live grid to confirm the proportions and spacing look right at the size you need.
- 5
Copy the generated CSS and paste it onto your container element, then drop your child elements inside — they auto-place into the tracks.
When this comes in handy
Card and product grids
Lay out galleries, dashboards or product listings where equal-width cards must wrap cleanly with consistent gutters, then swap 1fr for repeat(auto-fill, minmax(200px, 1fr)) to make it responsive.
Page scaffolding
Rough out a header, sidebar, main and footer structure quickly to see how the columns and rows divide the viewport before committing to named areas.
Prototyping and learning
Experiment with fr units, gaps and track counts interactively to build intuition for how Grid behaves without recompiling a project on every change.
Design-to-code handoff
Translate a Figma or sketch layout into exact grid-template values so front-end and design agree on the same column math.
Practical advice
- Prefer fr over percentages: fr accounts for the gap automatically, whereas three 33.33% columns plus gaps will overflow the container.
- For responsive grids, reach for repeat(auto-fit, minmax(min, 1fr)) instead of a fixed column count — tracks add and remove themselves as the viewport changes, no media queries required.
- Use gap for gutters rather than margins on children; margins fight the grid edges and don't collapse predictably between tracks.
- Grid follows document order, so avoid reordering items purely visually with grid-column placement — it desyncs the tab and screen-reader order from what sighted users see.
- Grid and gap are supported in every current browser; you can safely drop the old grid-gap fallback unless you still target very old Edge or Safari builds.
Common questions
What is the difference between CSS Grid and Flexbox?+
Flexbox is one-dimensional, laying items along a single row or column, while Grid is two-dimensional and controls rows and columns simultaneously. Use Flexbox for a toolbar or a row of buttons, and Grid for page layouts and card grids.
What does the fr unit mean in a grid template?+
fr stands for fraction and represents a share of the remaining free space in the container after fixed sizes and gaps are subtracted. repeat(2, 1fr) creates two columns that split the leftover space equally.
How do I make a CSS grid responsive without media queries?+
Use repeat(auto-fit, minmax(200px, 1fr)) for grid-template-columns. The browser fits as many 200px-minimum columns as will fit, then stretches them to fill the row, adding or removing columns automatically as the width changes.
What is the difference between gap, grid-gap and column-gap?+
gap is the modern shorthand for the spacing between grid tracks and replaced the older grid-gap, which still works as an alias. You can also set row-gap and column-gap independently, and gap accepts one or two values for those axes.
Why does my grid overflow when I use percentage columns?+
Percentages are calculated from the container width and do not subtract the gap, so columns totaling 100% plus gaps exceed the available space. Switching to fr units fixes this because fr distributes only the space left after gaps.
How do implicit rows work if I only define columns?+
When items exceed your explicitly defined rows, Grid creates implicit rows sized by grid-auto-rows (auto by default). This is why a grid with only grid-template-columns still lays out multiple rows of content correctly.