Skip to content
I Hate Online Tools

CSS grid generator

Define columns, rows, and gap; preview and copy grid CSS.

Runs in this tab. The file stays here.

Preview
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 8px;

This runs in your browser. Nothing is uploaded.

About CSS grid generator

Generate CSS Grid template columns and rows with gap, live preview, and copyable grid CSS.

Grid is the right tool when you mean columns and rows, not just a wrapping row of flex items. Writing repeat(12, 1fr) and friends by hand is fine until you are exploring three layouts in five minutes. This generator keeps template columns, rows, and gap editable with a preview.

Sketch the tracks, check the preview cells, copy the grid CSS. Same privacy model as the rest of the CSS category: preview here, paste elsewhere.

Flexbox remains better for simple toolbars and navs. Clamp can fluid-size gaps or column mins if you combine the outputs yourself.

How to use CSS grid generator

  1. 1Define template columns and rows (and gap).
  2. 2Review the live grid preview.
  3. 3Copy the generated grid CSS.

What it won't do

  • No visual drag-to-span editor for every cell.
  • Advanced placement (grid-area names) may need hand edits.

Common questions

Can I set named grid areas?

This version focuses on template columns/rows and gap. Named areas can be added manually on top of the copied CSS.

Does it support fr, px, and repeat()?

Yes — enter standard track sizing syntax in the template fields the UI exposes.

Flex or Grid for a card list?

Auto-wrapping cards are often Flex or Grid with auto-fit. Use Grid when aligned rows and columns both matter; use Flex when a single axis is enough.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app