🧱 CSS Grid Generator
By ToolNimba Web Dev Team · Updated 2026-06-19
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-use display:grid layout from a handful of inputs. Choose how many columns and rows you want, set the gap between cells, and (if you need it) type your own track sizes. You get the full CSS using repeat() and fr units, plus a live preview of the numbered cells so you can see the layout before you paste it into your stylesheet.
What is the CSS Grid Generator?
CSS Grid is a two-dimensional layout system: it lays out content in both 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 that flows into the cells.
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 the same thing as 1fr 1fr 1fr, just shorter and easier to change. You can mix units freely, so 200px 1fr pins a fixed sidebar and lets the main column take the rest.
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 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, which is one of the reasons Grid replaced older float and inline-block hacks.
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.
- Prototyping a page layout quickly and copying clean CSS into your project.
- 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, then click Copy to grab the generated CSS.
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;
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. |
| auto 1fr auto | Content-sized edges with a flexible middle. |
Track sizing units used in CSS Grid
| Unit | 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. |
| minmax(a, b) | A track that is at least a and at most b. |
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 ignored on a normal block element.
- Expecting more items than cells 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.
Glossary
- Grid container
- The element with display: grid set on it. Its direct children become grid items.
- 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.
- gap
- The spacing between rows and columns. One value sets both; two values set row gap then column gap.
Frequently asked questions
What is a CSS grid generator?
It 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, with a live preview of the cells.
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.
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.
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 one-value form automatically when both gaps are equal.
Can I mix fixed and flexible columns?
Yes. Use 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 combine px, %, fr, auto and minmax() in a single template.
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 browsers you may want a fallback layout, but for modern sites you can use the generated CSS with confidence.