🧱 CSS Grid Generator with Live Preview
By Shihab Mia · Updated 2026-07-05
Space-separated track sizes, e.g. 200px 1fr or repeat(3, 1fr).
Space-separated track sizes, e.g. auto 1fr 100px.
Adjust the columns, rows and gap. The preview and CSS update live.
This CSS grid generator builds a ready-to-paste display:grid layout from a few simple inputs. Choose how many columns and rows you want, set the gap between cells, and optionally type your own track sizes, then copy the full CSS. You get grid-template-columns and grid-template-rows written with repeat() and fr units, plus a live preview of the numbered cells so you can see the result before it touches your stylesheet.
What is the CSS Grid Generator?
CSS Grid is a two-dimensional layout system: it positions content across columns and rows at the same time, which makes it the natural choice for page scaffolding, card galleries, dashboards and any design built on a regular matrix of cells. You turn an element into a grid by setting display: grid on it, then describe the tracks with grid-template-columns and grid-template-rows. Every direct child of that element becomes a grid item and flows into the cells in order. This is the core idea a CSS grid generator encodes for you: you describe the tracks and gap, and it emits valid CSS you can trust.
The fr unit is what makes Grid feel effortless. An fr is a fraction of the free space left in the container after fixed sizes and gaps are subtracted. Writing grid-template-columns: 1fr 1fr 1fr gives three columns that always share the available width equally, no matter how wide the screen is. The repeat() function is shorthand for the same idea: repeat(3, 1fr) means exactly the same as 1fr 1fr 1fr, just shorter and far easier to change later. You can mix units freely, so 200px 1fr pins a fixed sidebar and lets the main column take whatever is left over.
The gap property controls the spacing between tracks without adding margins to the items themselves, which keeps the outer edges flush with the container. A single value like gap: 16px sets both the row and column gaps; two values, gap: 24px 16px, set the row gap first and the column gap second. Because the gap only sits between cells and never around the outside, your grid stays aligned to its parent. This is one of the reasons Grid replaced the older float and inline-block hacks that were fragile and hard to center.
Responsive layouts are where Grid pulls ahead of most alternatives. The pattern repeat(auto-fill, minmax(120px, 1fr)) tells the browser to fit as many columns as it can, each at least 120px wide and each stretching to share leftover space, then wrap to a new row automatically. There are no media queries in that line at all, yet it reflows from one column on a phone to many on a desktop. The generator lets you start from equal-fr columns and then switch on custom track sizing when you need this kind of intrinsic, self-adjusting layout.
Grid and Flexbox are complementary, not competitors. Flexbox is one-dimensional and excels at distributing items along a single row or column, such as a navbar or a button group. Grid is two-dimensional and excels when you need to align content in both directions at once, such as a full page shell with a header, sidebar, main area and footer. A common and robust approach is a Grid page skeleton with Flexbox handling the contents inside individual cells. Knowing which tool fits which job keeps your CSS shorter and your markup cleaner.
When you place more children than the explicit grid has cells, Grid does not drop them: it creates implicit rows (or columns) to hold the overflow. You size those extra tracks with grid-auto-rows or grid-auto-columns, and you control the flow direction with grid-auto-flow. Understanding the split between the explicit grid you define and the implicit grid the browser generates is the single most useful mental model for debugging a layout that looks almost right but has one row sized differently from the rest.
When to use it
- Scaffolding a responsive card or photo gallery where every cell shares the width equally.
- Laying out a dashboard or admin panel with a fixed sidebar and a flexible main area.
- Building a full page shell with header, sidebar, main content and footer regions.
- Prototyping a layout quickly and copying clean, valid CSS straight into your project.
- Creating a self-adjusting grid with auto-fill and minmax() that reflows without media queries.
- Teaching or learning how grid-template-columns, fr units and gap behave by changing them live.
How to use the CSS Grid Generator
- Set the number of columns and rows with the sliders.
- Choose the column gap and row gap in pixels.
- Optionally tick custom track sizing and type your own grid-template-columns and grid-template-rows values.
- Watch the live preview update as you change each input.
- Click Copy to grab the generated CSS, then paste it onto your container element.
Formula & method
Worked examples
You want a 3-column, 2-row gallery with a 16px gap, all cells equal width.
- Set columns = 3, rows = 2.
- Set both gaps to 16px.
- Columns become repeat(3, 1fr): three tracks each taking one fraction of the width.
- Rows become repeat(2, 1fr): two equal-height tracks.
- The 6 children flow into the cells left to right, top to bottom.
Result: display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px;
You want a fixed 200px sidebar, a flexible main column, and a larger row gap than column gap.
- Tick custom track sizing.
- Type grid-template-columns: 200px 1fr (the sidebar is fixed, main takes the rest).
- Type grid-template-rows: auto 1fr (header sized to content, body fills remaining height).
- Set row gap = 24px and column gap = 16px.
- Because the gaps differ, the shorthand becomes gap: 24px 16px (row first, column second).
Result: display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr; gap: 24px 16px;
You want a card grid that reflows on its own from one column on mobile to several on desktop, with no media queries.
- Tick custom track sizing.
- Type grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).
- Each column is at least 200px and stretches to share the leftover space.
- The browser fits as many columns as the width allows, then wraps the rest to new rows.
- Set gap = 20px so the cards keep even spacing at every width.
Result: display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
Common grid-template-columns patterns and what they do
| Value | Effect |
|---|---|
| repeat(3, 1fr) | Three equal-width columns that share the space. |
| 1fr 2fr 1fr | Three columns where the middle is twice as wide. |
| 200px 1fr | A fixed 200px column plus one that fills the rest. |
| repeat(auto-fill, minmax(120px, 1fr)) | As many 120px-or-wider columns as fit, responsive without media queries. |
| repeat(auto-fit, minmax(120px, 1fr)) | Like auto-fill, but empty tracks collapse so items stretch to fill the row. |
| auto 1fr auto | Content-sized edges with a flexible middle. |
Track sizing units and keywords used in CSS Grid
| Unit or keyword | Meaning |
|---|---|
| fr | A fraction of the free space left after fixed sizes and gaps. |
| px | A fixed pixel width or height for the track. |
| % | A percentage of the grid container size. |
| auto | Sized to the content of the items in that track. |
| min-content | The smallest size the content can take without overflowing. |
| max-content | The size the content wants if given unlimited space. |
| minmax(a, b) | A track that is at least a and at most b. |
Key CSS Grid properties and where they apply
| Property | Applies to | Purpose |
|---|---|---|
| display: grid | Container | Turns the element into a grid so its children become grid items. |
| grid-template-columns | Container | Defines the column tracks and their sizes. |
| grid-template-rows | Container | Defines the row tracks and their sizes. |
| gap | Container | Sets the spacing between rows and columns. |
| grid-auto-rows | Container | Sizes implicit rows created by extra items. |
| grid-column / grid-row | Item | Spans or places an item across specific track lines. |
Common mistakes to avoid
- Putting gaps on the items with margins. Adding margins to grid items to space them out leaves uneven edges and double spacing. Use the gap property instead: it sits only between tracks, never around the outside, so the grid stays flush with its container.
- Confusing fr with percent. An fr is a share of the leftover space after fixed sizes and gaps are removed, while % is a share of the whole container. Mixing 50% 50% with a gap overflows, because the gap has nowhere to go, whereas 1fr 1fr always fits.
- Forgetting display: grid on the parent. grid-template-columns and gap do nothing unless the container itself has display: grid (or inline-grid). The properties are silently ignored on a normal block element, so the layout looks unchanged.
- Expecting extra items to vanish. If you place more children than the explicit grid has cells, Grid creates implicit rows to hold them. Use grid-auto-rows to size those extra rows, or they default to auto height and may look uneven.
- Confusing auto-fill with auto-fit. With auto-fill the browser keeps empty tracks in place, so items stay their minmax size and leave gaps on the right. With auto-fit empty tracks collapse, so the visible items stretch to fill the whole row. Pick the one that matches the look you want.
- Fixed track sizes that cause overflow. Using several fixed px columns plus a gap can add up to more than the container width and trigger a horizontal scrollbar. Prefer fr units or minmax(0, 1fr) so tracks can shrink to fit narrow screens.
Glossary
- Grid container
- The element with display: grid set on it. Its direct children become grid items.
- Grid item
- A direct child of a grid container that flows into the grid cells.
- Track
- A single column or row in the grid, defined by grid-template-columns or grid-template-rows.
- fr unit
- Fractional unit: a share of the free space remaining in the container after fixed sizes and gaps.
- repeat()
- A function that repeats a track pattern, so repeat(3, 1fr) is shorthand for 1fr 1fr 1fr.
- minmax()
- A function defining a track that is at least a minimum size and at most a maximum size.
- gap
- The spacing between rows and columns. One value sets both; two values set row gap then column gap.
- Implicit grid
- Extra rows or columns the browser creates automatically when there are more items than explicit cells.
Frequently asked questions
What is a CSS grid generator?
A CSS grid generator is a tool that builds display:grid CSS for you. You pick the number of columns and rows, set the gap, and optionally type custom track sizes, and it outputs the grid-template-columns, grid-template-rows and gap rules ready to paste into your stylesheet, along with a live preview of the cells so you can confirm the layout first.
What does the fr unit mean in CSS Grid?
The fr unit is a fraction of the free space left in the grid container after any fixed track sizes and gaps are subtracted. Writing repeat(3, 1fr) gives three columns that always share the remaining width equally, which is why fr units make responsive grids so simple compared with fixed pixels or percentages.
How do I make all columns the same width?
Give every column the same fr value. The cleanest way is grid-template-columns: repeat(n, 1fr), where n is the number of columns. Each track then takes one equal fraction of the available width, no matter how wide the screen is, and the columns stay equal even as the container resizes.
What is the difference between gap with one value and two values?
A single value like gap: 16px applies the same spacing to both rows and columns. Two values, such as gap: 24px 16px, set the row gap first and the column gap second. This generator uses the shorter one-value form automatically whenever both gaps are equal.
Can I mix fixed and flexible columns?
Yes. Turn on custom track sizing and mix units, for example 200px 1fr, which pins a 200px column and lets the second column take all the remaining space. You can freely combine px, %, fr, auto and minmax() inside a single grid-template-columns value.
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). The browser fits as many columns as the width allows, each at least 200px and each stretching to share leftover space, then wraps the rest to new rows. The layout reflows from one column on a phone to several on a desktop with no media queries at all.
What is the difference between auto-fill and auto-fit?
Both fit as many columns as possible using minmax(). With auto-fill the browser keeps any empty tracks, so items stay their minimum size and leave space on the right. With auto-fit the empty tracks collapse, so the visible items stretch to fill the whole row. Use auto-fit when you want items to expand and auto-fill when you want a stable column rhythm.
When should I use CSS Grid instead of Flexbox?
Use Grid when you need to align content in two dimensions at once, such as a page shell with header, sidebar, main and footer, or a card matrix. Use Flexbox for one-dimensional rows or columns like a navbar or button group. A common pattern is a Grid page skeleton with Flexbox handling the contents inside each cell.
Why is my grid ignoring grid-template-columns?
The most common cause is that the container is missing display: grid. Track and gap properties are silently ignored on a normal block element, so nothing changes. Confirm display: grid (or inline-grid) is set on the parent, and remember these properties go on the container, not on the child items.
Does CSS Grid work in all browsers?
CSS Grid is supported in every current major browser, including Chrome, Edge, Firefox and Safari, and has been for years. For very old legacy browsers you may want a simple fallback layout, but for modern sites you can paste the generated CSS with confidence and no vendor prefixes.