CSS Grid Generator
Choose how many columns and rows you want, or let the columns fit the space on their own. See the cells and copy the code.
The orange fill and numbers in the preview are only there so you can see the cells. They are not part of the CSS.
Worked examples
Three equal columns with a 16px gap
Columns: 3 equal. Rows: grow with content, minimum 80px. Gap: 16px.
display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(80px, auto); gap: 16px;
Equal gaps are written as a single gap value.
About CSS Grid Generator
CSS grid arranges items in rows and columns at once, which makes it the natural choice for page layouts, galleries and dashboards. Its syntax packs a lot into a few words, though, and it is easy to forget whether you need repeat, minmax or auto-fit. This generator writes that syntax for you and shows the cells, so you can check the result before you copy anything.
Choose between a set number of equal columns, columns that appear and disappear to fit the space, or your own list of sizes such as a narrow sidebar and two wide columns. Rows can grow with their content or share a fixed height. Set the gaps, pick how many cells to show, and copy both the CSS and the HTML.
How to use CSS Grid Generator
- Choose how the columns are made: a set number, as many as fit, or your own sizes.
- Choose whether rows grow with their content or are equal in a set height.
- Set the column and row gaps and the number of cells.
- Copy the CSS and the HTML.
Common uses
- Building a responsive card list with no media queries
- Laying out a page with a sidebar and a main column
- Making a photo gallery with even rows and gaps
- Testing a grid idea before adding it to a stylesheet
Frequently asked questions
What does 1fr mean?
One fr is one share of the spare space in the grid. Three columns of 1fr share the width equally, and a column of 2fr next to a column of 1fr takes twice as much of the space as its neighbour.
How does auto-fit with minmax work?
It tells the browser to fit as many columns as it can, each at least the smallest width you give and sharing out any left over space equally. As the window narrows, columns drop away and the rest stretch, with no media queries needed.
What can I type as my own column sizes?
Any valid track list: lengths such as 200px or 12rem, percentages, fr units, auto, minmax(), and repeat(). The tool checks your entry with the browser and tells you if it is not valid.
Is grid or flexbox better?
Use grid when you care about rows and columns together, and flexbox when items flow in one direction and size themselves. Many pages use both, with grid for the overall layout and flexbox inside the pieces.