How to use the CSS Grid Generator
- 1. Set the grid sizeChoose how many columns and rows you want and the gap between them.
- 2. Fine-tune tracksEdit the column and row sizes, or make item 1 span several cells.
- 3. Copy the codePress Get CSS & HTML code and paste it into your stylesheet.
How CSS Grid works
CSS Grid is a two-dimensional layout system. You turn a parent into a grid with display: grid, then describe its columns with grid-template-columns and its rows with grid-template-rows. Every direct child becomes a grid item and drops into the next free cell.
The fr unit means a fraction of the free space. repeat(3, 1fr) makes three equal columns. With a 16px gap in a 960px container the free space is 960 − (2 × 16) = 928px, so each column is about 309px wide.
Worked example: set 3 columns, 2 rows and a 16px gap in the tool above. The generated CSS is grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 16px; and the HTML has six numbered items, which fill the 3 × 2 grid exactly.
Useful grid patterns to try
- Responsive cards: type
repeat(auto-fit, minmax(220px, 1fr))as the column size. Cards wrap to new rows on small screens without any media query. - Sidebar layout: use
250px 1frfor a fixed sidebar and a flexible main area. - Hero tile: set item 1 to span 2 columns and 2 rows to make one big feature box with smaller boxes around it.
- Centring: set justify items and align items to center to put every item in the middle of its cell.
Grid is best when you control rows and columns together. For a single row of buttons or a navbar, the Flexbox Playground is often simpler.
Frequently asked questions
What is the difference between CSS Grid and Flexbox?
Flexbox lays items out in one direction, a row or a column. Grid controls rows and columns at the same time, which suits page layouts and card galleries.
Does the generated code work in all browsers?
Yes. CSS Grid with fr units, gap and span is supported in every current version of Chrome, Edge, Firefox and Safari.
Can I use pixel and fr values together?
Yes. Type something like 200px 1fr 2fr in the column sizes box. The tool accepts px, %, fr, auto, minmax() and repeat().
Do I pay anything for the grid code?
No, it is free. Designing the grid is open to everyone. When you ask for the code the first time, we ask for your name and WhatsApp number once, and after that every Uncodemy tool opens straight away.