What does the fr unit actually mean?

fr is a fraction of the leftover space in the grid container, after fixed-size tracks and gaps have been subtracted. Three columns of 1fr each split the remaining space into three equal parts. A 2fr track next to two 1fr tracks takes half the space. Unlike percentages, fr accounts for gaps automatically, which is why grid-template-columns: repeat(3, 1fr) with a gap works and three 33.33% columns overflow.

When should I use CSS Grid instead of flexbox?

Grid is two-dimensional: it controls rows and columns at the same time, which suits page layouts, dashboards, and galleries where things need to line up in both directions. Flexbox is one-dimensional and better when the content should size itself along a single line, like a navbar or a row of buttons. In practice most real pages use both — grid for the page shell, flexbox inside the individual components.

How do I make an item span two columns?

Click that cell in the preview and set its column span to 2. The generated CSS uses grid-column: span 2, which spans two tracks from wherever the item is auto-placed. If you set a start line as well, the output becomes grid-column: 2 / span 2, pinning it to a specific column.

What is the difference between justify-items and align-items in grid?

justify-items positions every item horizontally inside its own cell, and align-items positions it vertically. The default for both is stretch, so items fill their cells completely — which is why setting a background colour on a grid item usually paints the whole cell. Switch either to start, center, or end to shrink the item to its content size in that direction.

Why does the generated CSS use repeat()?

When every track in a row or column list is the same size, repeat(n, size) says the same thing in less code and is easier to change later. The tool collapses identical tracks automatically; as soon as you give one track a different size, the full explicit list is written out instead.

Is any of this sent to a server?

No. The layout is built and the CSS is generated by JavaScript in your own browser tab. Nothing is uploaded, saved, or logged, and closing the tab clears everything.

CSS Grid Generator — Visual Grid Layout Builder

Columns 3

Rows 2

column-gap 12px

row-gap 12px

justify-items

align-items

Click a cell to place it

display: grid;

A visual builder for CSS Grid. Set how many columns and rows you want, size each track in fr, px, %, or auto, adjust the row and column gaps, and click any cell to make it span several columns or rows. The preview updates as you go, and the generated grid-template CSS is ready to paste into your stylesheet.

How it works

1
Set up the tracks Choose the number of columns and rows, then size each track individually. Use fr for flexible shares of the free space, px for fixed sizes, % for a share of the container, or auto to let the content decide.
2
Adjust gaps and alignment Drag the column-gap and row-gap sliders to space the tracks apart, and use justify-items and align-items to position each item inside its own cell.
3
Place items and copy Click a cell in the preview to select it, then set a start line or a span to make it stretch across several columns or rows. Copy the finished CSS from the box below.

Your data stays private

All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.

Frequently asked questions

What does the fr unit actually mean?: fr is a fraction of the leftover space in the grid container, after fixed-size tracks and gaps have been subtracted. Three columns of 1fr each split the remaining space into three equal parts. A 2fr track next to two 1fr tracks takes half the space. Unlike percentages, fr accounts for gaps automatically, which is why grid-template-columns: repeat(3, 1fr) with a gap works and three 33.33% columns overflow.
When should I use CSS Grid instead of flexbox?: Grid is two-dimensional: it controls rows and columns at the same time, which suits page layouts, dashboards, and galleries where things need to line up in both directions. Flexbox is one-dimensional and better when the content should size itself along a single line, like a navbar or a row of buttons. In practice most real pages use both — grid for the page shell, flexbox inside the individual components.
How do I make an item span two columns?: Click that cell in the preview and set its column span to 2. The generated CSS uses grid-column: span 2, which spans two tracks from wherever the item is auto-placed. If you set a start line as well, the output becomes grid-column: 2 / span 2, pinning it to a specific column.
What is the difference between justify-items and align-items in grid?: justify-items positions every item horizontally inside its own cell, and align-items positions it vertically. The default for both is stretch, so items fill their cells completely — which is why setting a background colour on a grid item usually paints the whole cell. Switch either to start, center, or end to shrink the item to its content size in that direction.
Why does the generated CSS use repeat()?: When every track in a row or column list is the same size, repeat(n, size) says the same thing in less code and is easier to change later. The tool collapses identical tracks automatically; as soon as you give one track a different size, the full explicit list is written out instead.
Is any of this sent to a server?: No. The layout is built and the CSS is generated by JavaScript in your own browser tab. Nothing is uploaded, saved, or logged, and closing the tab clears everything.

From the blog

CSS Grid in Practice: fr Units, Spans, and the Rules Worth Knowing How grid tracks, the fr unit, gaps, and item spans really work, plus when grid beats flexbox and when it does not. Read the post →

CSS Grid Generator — Visual Grid Layout Builder

How it works

Your data stays private

Frequently asked questions

From the blog

Related tools