CSS Grid generator
Build a CSS Grid container with a live preview — fixed columns or responsive auto-fit.
Runs 100% in your browserHow to use the grid generator
- Choose columns and rows. Pick a fixed column count or an auto-fit responsive grid.
- Adjust gap and minmax. Slide gap and the minimum column width to taste.
- Copy the CSS. Click Copy to grab the container rule.
About CSS Grid
CSS Grid lets you describe a layout as rows and columns and then place items into named or numbered regions. The two patterns this tool covers handle most production use cases: a fixed column count (great for app shells with a known sidebar/main split) and an auto-fit + minmax responsive grid (great for card walls — the browser fits as many columns as your minimum width allows, then stretches them to fill the row).
Frequently asked questions
- A two-dimensional layout system — you control rows and columns at the same time. Best for page-level layouts and any grid where row spans matter.
- fr (fraction) units distribute leftover space proportionally — 1fr 2fr means the second column gets twice the remaining space. Mix with fixed sizes (e.g. 200px 1fr) for sidebars.
- It creates as many same-sized columns as will fit, each at least the minmax minimum. The most common responsive grid pattern.
- Grid when both axes matter (page layouts). Flexbox when content flows in one direction (toolbars, button rows).