Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Grid Generator

Set the number of columns and rows and the gap, watch the numbered grid update live, then copy the container CSS.

Preview
1
2
3
4
5
6
7
8
9

3 x 3 grid, 9 cells

Layout
Gap
Track notation
CSS
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}

Everything runs in your browser. Nothing is uploaded.

How to generate a CSS grid layout

  1. Set columns and rows

    Drag the column and row sliders to choose how many tracks the grid has, and the numbered preview redraws to match.

  2. Set the gap

    Use the gap slider to add space between the cells, measured in pixels, and see it applied in the preview instantly.

  3. Pick the notation

    Choose compact repeat() notation or an expanded list of 1fr tracks, whichever you prefer to read in your stylesheet.

  4. Copy the CSS

    The container rule below the preview always matches what you see. Click Copy CSS to paste it into your project.

Why use this tool

Numbered live preview

Every cell is numbered in reading order and the whole grid redraws the moment you move a slider, so you can see exactly how the tracks and gap lay out.

Equal fr-unit tracks

Columns and rows are generated as equal fractions with 1fr, so the grid fills its container and stays responsive without fixed pixel widths.

Compact or expanded output

Switch between repeat(3, 1fr) shorthand and a written-out 1fr 1fr 1fr list to match the style of your codebase.

Adjustable gap in pixels

Set a single gap value that applies between every row and column, from a tight grid to a widely spaced one.

Clean, paste-ready CSS

Output is a plain container rule with display, the column and row templates, and the gap, ready to drop onto any element.

Runs entirely in your browser

The grid and its CSS are built on your device; nothing is uploaded and there is no signup.

About this tool

This CSS grid generator builds a two-dimensional layout from three simple controls: the number of columns, the number of rows, and the gap between cells. As you drag the sliders, the preview draws a numbered cell for every position in the grid so you can see the reading order and how the space divides. At the same time the tool writes the matching container CSS, which you can copy and paste onto any element.

The columns and rows are generated with fr units, the fraction unit that splits the available space into equal parts. A three-column grid becomes repeat(3, 1fr), which means three tracks that each take one equal share of the width, so the layout fills its container and adapts as the viewport changes instead of relying on fixed pixel widths. You can switch the output between the compact repeat() form and an expanded 1fr 1fr 1fr list if you prefer to read the tracks explicitly. The gap sets the space between every row and column at once, in pixels.

Grid layouts like these are the backbone of card decks, photo galleries, dashboards, and pricing tables. Once the structure is in place, the box shadow generator and CSS border radius generator help style the cells, and the aspect ratio calculator is handy when the cells need a consistent shape. Everything happens in your browser as you adjust the controls. Nothing is uploaded, there is no account, and the CSS exists only in your tab until you copy it.

Frequently asked questions

How does this CSS grid generator work?
Set the number of columns and rows and the gap with the sliders. The tool draws a numbered preview of the grid and writes the matching container CSS using grid-template-columns, grid-template-rows, and gap. Copy the rule and paste it onto the element you want to turn into a grid.
What are fr units?
The fr unit is a fraction of the free space in a grid container. A track sized 1fr takes one equal share of the available room, so repeat(3, 1fr) makes three columns of equal width that grow and shrink with the container. This keeps the layout responsive without fixed pixel widths.
What is the difference between compact and expanded notation?
They produce the same layout. Compact notation uses repeat(3, 1fr) as a shorthand, while expanded notation writes each track out as 1fr 1fr 1fr. Pick whichever is easier to read in your stylesheet; the preview and result are identical.
How large a grid can I make?
You can set up to 12 columns and 12 rows, which is enough for most card decks, galleries, and dashboards. The preview stays visible and the numbered cells update instantly at any size within that range.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server. The grid is rendered and its CSS is generated locally, with no account and no upload.
How do I use the generated CSS?
Copy the rule and apply its class, or its declarations, to a container element. The direct children of that element become grid items and flow into the numbered cells in order. Add or remove children to fill the grid you designed.

Related tools