1fr means one fraction of the remaining available space after fixed-size tracks are subtracted. With three columns of 1fr each, the space is split evenly into thirds.

Is my data uploaded to a server?

No. All generation runs locally in your browser. Nothing is sent to any server.

How do I make a responsive grid without media queries?

Use repeat(auto-fill, minmax(200px, 1fr)) as your grid-template-columns value. This creates as many 200px minimum columns as will fit, automatically wrapping to the next row.

Can grid items span multiple columns or rows?

Yes. On individual items add grid-column: 1 / 3 (spans columns 1 to 3) or grid-row: span 2. This tool generates the container CSS — item placement properties are added manually.

▦

CSS Grid Generator

Design CSS grid layouts visually. Define columns, rows, gaps and areas, then copy the full CSS grid code instantly. Free, runs entirely in your browser.

💻 Developer Tools Free Browser-based

Tool

Columns

Rows

Column gap

Row gap

justify-items

Live Preview

Generated CSS

CSS Grid Track Values

Value	Meaning
`1fr`	One fraction of available space
`auto`	Size based on content
`200px`	Fixed pixel size
`minmax(100px, 1fr)`	At least 100px, up to 1fr
`repeat(3, 1fr)`	Three equal columns
`fit-content(200px)`	Fits content up to 200px max

Grid vs Flexbox

CSS Grid is a two-dimensional system — perfect for full-page layouts, dashboards, card grids and any design that needs control over both rows and columns at the same time. Use Flexbox for single-row or single-column component layouts (navigation bars, button groups). Many layouts combine both: Grid for the macro layout, Flexbox for individual components within grid cells.

CSS Grid Generator

CSS Grid Track Values

Grid vs Flexbox

Frequently Asked Questions