🔲 CSS Grid Generator
Choose the number of columns and rows, set their sizes and the gap, and copy the grid CSS. The preview shows the tracks and cells live.
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;How the css grid generator works
CSS Grid builds two-dimensional layouts from columns and rows called tracks. This generator lets you set how many columns and rows you want, size each track (in fr units, pixels or auto), and set the gap between cells, then it writes the grid-template-columns, grid-template-rows and gap declarations. The fr unit is the key idea: it distributes leftover space in fractions, so 1fr 2fr makes the second column twice as wide as the first. The preview renders the grid so you can see the tracks before you copy the code, all in your browser.
For a responsive grid that fits as many columns as will fit, use repeat(auto-fit, minmax(200px, 1fr)) instead of a fixed count, a pattern this tool can produce. Grid handles the overall page or card structure; use flexbox inside individual cells for one-dimensional alignment.
Frequently asked questions
What is the fr unit in CSS Grid?
fr means "fraction of the remaining space." A track of 1fr takes one share of the leftover space after fixed sizes are subtracted; 1fr 2fr splits remaining space one-third and two-thirds. It is the cleanest way to size flexible grid columns.
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). The grid fits as many 200px-minimum columns as the width allows and stretches them to fill, reflowing automatically as the screen changes.
What is the difference between CSS Grid and Flexbox?
Grid is two-dimensional (columns and rows at once), ideal for page layouts and card grids. Flexbox is one-dimensional (a single row or column), ideal for navbars and toolbars. They work well together.
How do I set the gap between grid items?
Use the gap property (formerly grid-gap), for example gap: 16px, or row-gap and column-gap separately. The generator includes a gap control and writes it into the output.
Is my layout uploaded?
No. The grid CSS is generated in your browser and never sent anywhere.