About the CSS Grid Generator
CSS grid places items in rows and columns at the same time, which makes page layouts, galleries and dashboards simple. This generator lets you choose the number of columns and rows, how big each track is and the gap between cells, shows a live preview with numbered cells and writes the CSS: display: grid, grid-template-columns, grid-template-rows and gap. Type the number of columns and rows, the track sizes and the gap and the CSS grid appears at once, with a few related figures underneath, and you can copy the result with one tap. The sums run in your browser, so nothing you enter is uploaded.
Updated October 2026
How to use the CSS Grid Generator
- 1Enter the number of columns and rows, the track sizes and the gap.
- 2Pick the units or options from the menus if the CSS grid tool offers them.
- 3Read the CSS grid in the large result box.
- 4Look at the extra rows for related figures.
- 5Press Copy result to keep the answer.
When you need the CSS grid
Developers use it to start a photo gallery, a dashboard, a pricing table or a page with sidebar and content. Designers use the preview to check column widths before they commit to code.
The fr unit is what makes grids flexible: three 1fr columns always share the width equally, whatever the screen. Using minmax(0, 1fr) stops long content from stretching a column.
How the CSS grid is worked out
grid-template-columns and grid-template-rows define the tracks. repeat(n, size) repeats a size n times. 1fr takes one equal share of the free space, auto fits the content, and minmax(a, b) sets a range. Three columns of 1fr, two rows of auto and a gap of 10 pixels give display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 10px; The preview shows six cells in a 3 by 2 grid of equal columns.
Every answer on this page comes from that one rule, so you can check any result by hand with a calculator. The figures shown underneath, such as other units, are conversions of the same answer.
- Columns, rows, gap
- Track size choices
- Live numbered preview
Mistakes to avoid with CSS grid
The generator makes a uniform grid. Real layouts often name areas, span cells across columns and rows, or change the number of columns with media queries or auto-fit. Add those by hand to the CSS you copy. Grid is supported in all current browsers.
On phone and computer
On a phone, type into the boxes one after another and read the CSS grid underneath; Copy result puts it on the clipboard for a message or a note. On a computer the inputs sit on the left and the answer on the right, so you can change one figure and watch the CSS grid move. The css grid generator works the same on both. Use CSS Flexbox Generator for a single row or column, add depth with CSS Box Shadow Generator, round corners with Border Radius Generator, and use PX to REM Converter for flexible sizes.
Features
- fr shares free space
- minmax(0, 1fr) controls overflow
- Add areas and spans by hand
- Clear messages when the CSS grid inputs make no sense
- Copy the result with one tap
- Private: nothing is uploaded
Frequently asked questions
How do I calculate CSS grid?
grid-template-columns and grid-template-rows define the tracks. repeat(n, size) repeats a size n times. 1fr takes one equal share of the free space, auto fits the content, and minmax(a, b) sets a range. Three columns of 1fr, two rows of auto and a gap of 10 pixels give display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 10px; The preview shows six cells in a 3 by 2 grid of equal columns.
What is the formula for CSS grid?
grid-template-columns and grid-template-rows define the tracks. repeat(n, size) repeats a size n times. 1fr takes one equal share of the free space, auto fits the content, and minmax(a, b) sets a range. The css grid generator applies it exactly and rounds only the displayed answer to six significant figures.
What does fr mean?
A fraction of the free space. 1fr and 2fr give a one-to-two split.
What is the difference between grid and flexbox?
Flexbox arranges items in one line; grid arranges them in rows and columns.
How do I make the columns responsive?
Use repeat(auto-fit, minmax(200px, 1fr)) so the number of columns changes with the width.
Is this css grid generator free and private?
Yes. It is free, needs no account and runs in your browser, so the numbers you type are not uploaded or stored.