For years my instinct when a design called for a real two-dimensional layout was to reach for a stack of nested flex containers. A row of cards inside a column inside another row, each one flexing, each one fighting the others for space. It worked, in the sense that the pixels eventually landed where I wanted, but it was never the right tool, and every time I had to change the design I paid for the shortcut. CSS Grid was built for exactly this, and the day I stopped avoiding it my layout code got shorter and my markup got flatter.
The thing that kept me away from grid for too long was the syntax. grid-template-columns: repeat(3, minmax(0, 1fr)) is not a phrase that rolls off the fingers, and the relationship between the tracks you declare and the boxes that appear is not obvious until you have seen it happen a few dozen times. That gap between "I know what I want" and "I know the property that produces it" is exactly what a generator closes.
The CSS Grid Generator lets you set the number of columns and rows, choose a size for each axis, dial in the gaps, and adjust the alignment, all while a live preview reflows in front of you. The exact CSS that produces what you see sits in a copy-ready box underneath. It turns grid from a spec you have to memorise into a layout you build by clicking.
TL;DR: CSS Grid is a two-dimensional layout model that controls rows and columns at the same time. The container drives it through
grid-template-columns,grid-template-rows,gap, and the four justify and align properties. This generator exposes all of them, shows a live preview, and emits clean CSS that usesrepeat()and thefrunit. Because the preview renders with the same declarations it outputs, what you see is exactly what you paste. It runs entirely in your browser with no signup.
What problem does a CSS grid generator solve?
The difficulty with CSS Grid is not that it is complicated. It is that it is abstract. You describe a structure ("three equal columns with a bit of space between them") and the browser computes the geometry. That indirection is the whole point, because it is what makes grids responsive without a single media query. But indirection is hard to hold in your head. You cannot look at repeat(3, 1fr) and instantly feel the result the way you can look at a rendered grid of boxes.
A generator collapses the write-save-refresh loop into a single interaction. You change the column count and three boxes become four. You switch a track from 1fr to auto and the column snaps to the width of its content. You raise the gap and the boxes breathe. After ten minutes of this, the fraction unit stops being a symbol you translate and becomes a thing you reach for on purpose. And when you are done exploring, you are not left with a note to transcribe, because the working CSS is already written for you in the output box.
There is a second, quieter benefit. Building the layout by manipulation forces the tool to emit only valid, well-formed CSS. You cannot produce a broken grid-template-columns value by clicking, so the output is always something you can paste with confidence. That reliability is the reason I keep a set of visual CSS builders close by rather than writing every rule from scratch.
Which properties does the grid container control?
CSS Grid, like flexbox, splits responsibility between the container and its items. The container defines the tracks and the overall structure, and that is where most layout decisions live, so it is where the generator focuses. Here is what each container property does.
| Property | What it controls | Common values |
|---|---|---|
grid-template-columns |
The number and size of columns | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
The number and size of rows | repeat(2, auto), 100px, 1fr |
gap |
Space between tracks | any length, for example 16px or 20px 10px |
justify-items |
Item position along the row axis | stretch, start, center, end |
align-items |
Item position along the column axis | stretch, start, center, end |
justify-content |
Track position when the grid is narrower than its container, on the row axis | start, center, space-between |
align-content |
Track position on the column axis | start, center, space-between |
The mental model that makes this stick is the distinction between the tracks and the items. grid-template-columns and grid-template-rows define the tracks, which are the empty lanes of the grid. The gap sits between those lanes. The justify-items and align-items properties then position each item inside the cell it occupies, while justify-content and align-content position the whole set of tracks inside the container when there is spare room. The generator keeps these two levels visually separate so you can feel the difference between moving an item within its cell and moving the entire grid within the page.
What does the fr unit mean?
The fr unit is the piece of CSS Grid that pays for the whole model, and it is worth understanding rather than copying. One fr represents one fraction of the free space in the grid container after any fixed sizes and gaps are subtracted. If you write grid-template-columns: 1fr 1fr 1fr, the container's available width is divided into three equal parts. Write 2fr 1fr 1fr and the first column takes half the space while the other two split the rest. The browser recalculates those fractions on every resize, which is why a fraction-based grid is fluid without any breakpoints.
This is the behaviour that makes grid superior to percentages for most layouts. A set of 33.33% columns ignores the gap and overflows, because the percentages plus the gaps add up to more than the container. Fraction units are computed after the gaps are taken out, so repeat(3, 1fr) with a gap always fits. The generator defaults to 1fr columns for exactly this reason, and you can watch three equal columns hold their proportions as you change the gap. If you want a column that hugs its content instead, switch it to auto, min-content, or max-content and see the difference immediately.
How do I make a three-column layout?
This is one of the most common things people build with grid, and the recipe is two lines. Set the container to display: grid and give it grid-template-columns: repeat(3, 1fr). That produces three equal columns that flow into as many rows as the content needs. Add a gap and you have a card layout.
In the generator, you set the column count to three, leave the size on 1fr, and the preview lays out a grid of equal cells. The output box shows:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
The reason this is worth building by clicking rather than typing is that real layouts are never quite this clean. You will want the sidebar to be a fixed width and the content to flex, or the first row to be taller than the rest. Each of those changes is one control in the generator and one edited value in the output, and you see the effect before you commit it to a stylesheet. If you are still deciding between grid and a flex-based approach for a particular block, the flexbox generator is the companion tool, and the comparison later in this guide explains when each one wins.
When should I use grid over flexbox?
This is the question that matters most once you know both models, and the honest answer is that it depends on the number of dimensions the layout has. Flexbox is one-dimensional. It arranges items along a single axis, a row or a column, and wraps them if you ask. Grid is two-dimensional. It controls rows and columns together, so an item can be positioned by both its row and its column at once.
The practical rule I use is this. If I am laying out a set of things in a line, a navigation bar, a row of tags, a toolbar, a stack of form fields, that is flexbox. If I am laying out a structure with both rows and columns that need to align to each other, a page shell with a header, sidebar, and content area, or a gallery where every card sits on a clean grid line, that is grid. The two are not rivals; a grid cell often contains a flex container, and a flex item is often a small grid. Here is the split as a table.
| Question | Flexbox | CSS Grid |
|---|---|---|
| Dimensions | One axis at a time | Rows and columns together |
| Best for | Toolbars, nav, rows of items, wrapping tags | Page layouts, galleries, dashboards, forms |
| Sizing driven by | Content, then distribution | The track template you declare |
| Alignment | justify-content, align-items |
Same plus justify-items, align-content |
| Typical use | Inside a grid cell | The overall page or section frame |
The generator makes this concrete because you can build the same visual result both ways and see which produces the cleaner rule. For a gallery of equal cards, grid with repeat() is two lines and flex is a wrapping container with widths on every child. For a single row that needs to spread its items to the edges, flex with space-between is the shorter path.
What is the difference between gap, justify-content, and align-content?
These three often get confused because they all deal with space, but they operate at different levels. The gap property sets the fixed spacing between tracks, and it is the one you will use in almost every grid. A single value spaces rows and columns equally; two values set the row gap and column gap separately, in the order row then column. The generator lets you set the two gaps independently and emits the shorthand only when they differ, so the output stays as short as the situation allows.
justify-content and align-content, by contrast, only do anything when the grid's tracks are smaller than the container, leaving spare room to distribute. If your columns are all fixed pixel widths and they do not fill the container, justify-content: center will centre the whole block of tracks, and space-between will push them to the edges. With fr columns that already fill the width, these properties have nothing to distribute and appear to do nothing, which is a common source of confusion. The generator omits them from the output when they are left at the default start, so every line in the copied rule is one that has a visible effect. That habit of emitting only meaningful declarations is the same one I rely on in the gradient generator and the box-shadow generator, because a rule full of no-op lines is a rule you cannot trust at a glance.
How does the generator keep the preview honest?
The trap with any visual builder is that the preview and the exported code can drift apart. A tool that renders its preview one way and generates its code another way is worse than useless, because it teaches you a layout that will not reproduce. This generator avoids that by building both the preview and the copied CSS from a single list of declarations. The same function that decides which properties to emit is the one that styles the preview boxes, so what you see is exactly what you paste. There is no separate rendering path that could disagree.
That design choice is why the output uses repeat() for any axis with more than one track. A single track is emitted as the bare size, but two or more collapse into repeat(n, size), which is both what a human would write and what keeps the rule readable as the count grows. It is a small thing, but it is the difference between output you would ship and output you would rewrite.
Building a responsive card grid, step by step
Here is a workflow I use often. Start with the column count at three and the size on 1fr. You now have three equal, fluid columns. Set the row size to auto so each row grows to fit its tallest card. Raise the gap to something comfortable, around twenty pixels for cards. That is a complete, responsive card grid, and the output is four lines.
To make it wrap on its own without media queries, the next step in a real project is to swap repeat(3, 1fr) for repeat(auto-fill, minmax(240px, 1fr)), which tells the browser to fit as many 240-pixel-minimum columns as it can and stretch them to fill. The generator gives you the fixed-count starting point; that one edit turns it into a self-wrapping grid. Understanding the starting point is what makes the edit obvious, and that is the whole argument for learning layout by building it rather than pasting it. The broader case for assembling a set of tools that work this way is in the piece on the web developer toolkit, and the workflow habits behind it are in the developer productivity tools guide.
What browsers support CSS Grid?
CSS Grid is supported in every current browser and has been for years. The properties this generator emits are standard and unprefixed, so the output works in Chrome, Firefox, Safari, and Edge without vendor prefixes or fallbacks for any browser a project realistically targets today. The gap property in grid containers, which was the last piece to land widely, is also universally supported now. That means the CSS you copy is production-ready as written, which was not always true in the early years of grid and is one reason the model is finally the default choice rather than a progressive enhancement. For the underlying rules, the CSS Grid Layout Module Level 1 specification from the W3C is the primary source, and it is worth a read once the generator has given you the intuition to follow it.
If you are building a broader visual toolkit alongside this, the border-radius generator and CSS clamp generator round out the set, and the coding tools guide collects the ones I reach for most.
Frequently asked questions
What is a CSS grid generator?
A CSS grid generator is a visual tool that builds CSS Grid Layout code from settings you choose. You pick columns, rows, track sizes, gaps and alignment, and it outputs the grid-template CSS along with a live preview of the result.
What does the fr unit mean in CSS Grid?
The fr unit represents a fraction of the free space in the grid container. grid-template-columns: repeat(3, 1fr) creates three columns that each take an equal share of the available width and reflow as the container resizes.
What is the difference between CSS Grid and flexbox?
CSS Grid is a two-dimensional model that controls rows and columns together, ideal for page layouts and card grids. Flexbox is one-dimensional, laying items along a single axis, ideal for toolbars and rows. They are complementary and often used together.
How do I make a responsive grid?
Use fr units so tracks share the available width, and combine repeat() with minmax() and auto-fill or auto-fit for grids that wrap on their own. This generator emits repeat() with fr tracks as a starting point you can extend.
What is the gap property in CSS Grid?
gap sets the spacing between grid tracks. A single value spaces both rows and columns equally; two values set the row gap and column gap separately, in the order row-gap then column-gap.
Is the generated grid CSS safe to use in production?
Yes. CSS Grid is supported in every modern browser and the tool emits standard, unprefixed properties. All processing happens in your browser, so nothing is uploaded and the tool works offline once loaded.
Does the CSS Grid Generator work on mobile?
Yes. The tool is fully responsive and works in any modern browser on phones, tablets and desktops. The generated CSS is identical regardless of the device you build it on.
Is this CSS Grid Generator free?
Yes. It is completely free with no signup, no watermarks and no usage limits. The grid CSS it produces is yours to use in any project.
