Home › Generators & Text Tools › CSS Grid Generator
CSS Grid Generator
Build a CSS grid visually with this free CSS grid generator. Choose the number of columns and rows, set the track sizes and the gap, and watch a live preview update as you change the settings — then copy the generated CSS, ready to paste into your own stylesheet.
How it works
CSS grid is the layout system built into every modern browser. You take a container element — a div, a section, a list — and declare it a grid with display: grid. Then you describe its columns and rows, and the browser places each child element into a cell, in order, from left to right and top to bottom. No floats, no absolute positioning, no fragile hacks: the grid itself does the layout, and the content just flows into it.
Columns and rows are defined with grid-template-columns and grid-template-rows. Each value in the list is one track: a column or a row. The generator writes these with the repeat() function, so three equal columns become repeat(3, 1fr) instead of 1fr 1fr 1fr. The fr unit is the key idea to understand: it stands for fraction, a share of the free space in the container. In repeat(3, 1fr) each column gets one equal share, so all three are the same width. In a 2fr 1fr layout, the first column gets two shares and the second gets one, so the first is twice as wide as the second. Unlike percentages, fr units automatically leave room for the gap, so the tracks never overflow the container.
Track sizes can also be fixed or flexible. A fixed size like 200px makes every track exactly that wide, which suits a gallery of square thumbnails. auto sizes a track to fit its content, which is handy for a sidebar that should hug its text. minmax(150px, 1fr) is the flexible option: the track is at least 150 pixels wide, but it grows to take a share of the free space when there is room. The gap sets the space between the tracks — a single value like 16px applies to both rows and columns, and it is the modern replacement for the older grid-gap property, which does the same job under its old name.
The preview on this page is a real grid, built with the exact CSS the generator outputs, so what you see is what you get: change the columns from 3 to 4 and a fourth column appears; raise the gap and the cells spread apart. When the layout looks right, press Copy CSS and paste the block into your stylesheet as the rules for your container — for example inside a .grid class — then give your container that class in your HTML. Every direct child of the container becomes one grid item, placed into the cells in order, and the layout works in every modern browser with no extra code.
Worked example
Suppose you are building a photo gallery with three columns and two rows, a 16-pixel gap, and equal-sized tracks. Here is how to build it with the generator.
Step 1: Set Columns to 3 and Rows to 2.
Step 2: Set Gap to 16.
Step 3: Leave Column track size on "Equal — 1fr each" and Row track size on "Equal — 1fr each".
Step 4: The preview shows six numbered cells in three columns and two rows, with 16 pixels of space between them.
Step 5: Press Copy CSS and paste the code into your stylesheet.
The generated CSS reads exactly like this:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}
Now try a different layout in the tool: set Columns to 4, Rows to 3, Gap to 24, and choose "First wider — 2fr 1fr" for the column size. The preview becomes a 4 × 3 grid with 12 cells and a 24-pixel gap, and the CSS updates to grid-template-columns: 2fr 1fr 2fr 1fr; — the two-track pattern repeats across the four columns, so the first and third columns are each twice as wide as the second and fourth. The row line becomes grid-template-rows: repeat(3, 1fr);. That is the correct way to express a repeating pattern, and the preview shows exactly the layout the code produces.
FAQ
What is CSS grid?
CSS grid is a layout system built into browsers that arranges content in rows and columns. You declare a container as a grid, define its columns and rows, and the browser places each child element into a cell. It is the standard way to build page layouts, photo galleries, card grids, and dashboards without fragile floats or positioning hacks.
What does 1fr mean in grid-template-columns?
The fr unit stands for fraction: it is a share of the free space left in the grid container. In repeat(3, 1fr), each of the three columns gets one equal share, so the columns are all the same width. In 2fr 1fr, the first column gets two shares and the second gets one, so the first column is twice as wide as the second. Unlike percentages, fr units automatically account for the gap between tracks.
What is the difference between gap and grid-gap?
They do the same job: gap is the modern shorthand for the space between grid rows and columns, and grid-gap is the older name for the same property. Modern browsers support gap, so use gap in new code. A single value like gap: 16px sets both the row and column gaps; two values like gap: 16px 24px set the row gap first and the column gap second.
How do I make a grid responsive?
Use repeat(auto-fit, minmax(240px, 1fr)) for the columns instead of a fixed count. That tells the browser to fit as many columns of at least 240 pixels as the container allows, so a wide screen shows several columns and a phone shows one. The generated CSS from this tool is a good starting point; replace the fixed repeat count with auto-fit and minmax when you need that behaviour.
Where do I paste the generated CSS?
Paste it into your stylesheet as the rules for your grid container, for example inside a .grid class, and give the container that class in your HTML. The display: grid line turns the element into a grid, the template lines define its columns and rows, and the gap line sets the spacing. Each direct child of the container then becomes one grid item, placed into the cells in order.