Design two-dimensional page layouts without hand-writing code. Our free CSS Grid Generator lets you choose the number of columns, rows and gaps, shows a live preview as you type, and produces clean, copy-ready CSS for your project.
The preview updates live as you change the settings. Paste the CSS into your stylesheet and add the grid-container class to your wrapper element.
How to Use
- Set the number of columns and rows for your layout.
- Adjust the gap between grid items in pixels.
- Watch the live preview update as you type.
- Click Copy CSS to copy the generated code.
- Paste it into your stylesheet and add the
grid-containerclass to your wrapper element.
Key Features
- Live visual preview that updates with every keystroke.
- Clean, copy-ready CSS using modern
repeat()andfrunits. - One-click copy button with confirmation.
- Responsive-friendly output that adapts to any container width.
- Free to use with no sign-up, on any device.
FAQs
What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you arrange content into rows and columns. It is ideal for page layouts, galleries, card grids and dashboards.
What does 1fr mean?
The fr unit stands for “fraction” — repeat(3, 1fr) divides the available space into three equal columns, whatever the container width.
Is CSS Grid supported in all browsers?
Yes. CSS Grid is supported by all modern browsers, including Chrome, Edge, Firefox and Safari, so the generated code works everywhere.
How do I use the generated CSS?
Copy the code into your stylesheet, add the grid-container class to a wrapper div, and place one child div inside it per grid cell.
What is the difference between gap and grid-gap?
gap is the modern shorthand property; grid-gap was its older name. The generator outputs gap, which all current browsers understand.
Related Tools
You may also like our CSS Button Generator, CSS Card Generator and CSS Gradient Generator.