CSS Grid Generator
Build a CSS grid layout visually. Set columns, rows and gaps — edit grid-template-columns directly to use fr, minmax() or fixed values.
CSS generated is free to use — no attribution required.
How do you use the CSS grid generator?
Use the sliders to set the number of columns and rows, then adjust the column and row gaps. You can also type directly in the grid-template-columns field to use fr units, minmax(), auto, or fixed pixel values.
What are the CSS Grid fundamentals?
display: grid turns any element into a grid container. grid-template-columns defines the column track sizes — 1fr 1fr 1fr creates three equal columns. column-gap and row-gap set the gutter between tracks (shorthand: gap).
What is the fr unit in CSS Grid?
fr stands for "fractional unit" — it distributes available space proportionally. 1fr 2fr 1fr creates a 3-column layout where the middle column is twice as wide as the others.
What is the difference between CSS Grid and Flexbox?
Use Grid for 2D layouts (rows AND columns). Use Flexbox for 1D layouts (either a row OR a column). They complement each other — a grid item can itself be a flex container.