๐ฒ CSS Grid Generator
Specify the number of columns, rows, and the gap between them to generate CSS Grid layout code, with a live preview of the resulting grid so you can see your changes as you make them.
How to use
- Enter the number of columns and rows.
- Enter the column gap and row gap.
- Check the preview, then copy the generated CSS code to use in your project.
How the calculation works
CSS Grid lays out items in two dimensions, rows and columns. Set the number of columns and rows and the gaps, and this tool shows a preview and generates the container CSS. โข grid-template-columns: repeat(3, 1fr) creates three equal columns โข grid-template-rows: the row heights โข column-gap / row-gap: spacing between columns and between rows The fr unit shares out the available space after gaps; repeat(3, 1fr) splits it into three equal parts. Columns and rows can each be 1 to 12.
Worked example
3 columns ร 2 rows with 16px gaps .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px; } In a 1000px-wide container, the 968px left after two gaps (32px) is split three ways, about 322.7px per column.
Things to be aware of
- For a column count that adapts to the screen width, grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) is a common pattern.
- Use Flexbox for one-directional layouts and Grid when rows and columns both need to line up.
- If column-gap and row-gap are equal, write them as gap: 16px.
FAQ
Which CSS properties does the generated code use?
It uses the core CSS Grid properties: display: grid, grid-template-columns, grid-template-rows, column-gap, and row-gap.
Can I make columns or rows different sizes instead of equal?
This tool generates equal-width columns and rows (1fr each). To make specific columns wider or narrower, edit the generated grid-template-columns value by hand (e.g. 1fr 2fr 1fr).
Does this work in older browsers like IE11?
The generated code uses the standard modern CSS Grid syntax. IE11 only supports an old, incompatible draft syntax, so this tool targets modern browsers.