CSS Grid Generator
Set the number of columns and rows (or type custom track sizes), adjust the gap, and watch a live grid of numbered cells update instantly. Copy the finished display: grid CSS when you're happy with the layout.
How to Use the CSS Grid Generator
- Set how many columns and rows you want, and the gap between cells.
- Leave the pattern as "Equal columns" for evenly-sized
frcolumns, or switch to "Custom track sizes" to type exact widths like200px 1fr 100px. - Watch the live preview render numbered cells matching your exact column × row layout.
- Copy the generated CSS and apply it to your grid container's class.
Why Use This Tool?
Is my layout configuration uploaded anywhere?
No. Every value you set is applied directly to a live CSS grid preview rendered in your own browser. Nothing is transmitted to a server, logged, or stored — this tool is simply a fast visual sandbox for experimenting with grid values before writing them into your actual stylesheet.
What does the "fr" unit mean?
fr stands for "fractional unit" and represents a share of the remaining available space in the grid container. repeat(4, 1fr) creates four equal-width columns that automatically resize together as the container's width changes — this is why it's the default and most common pattern for evenly split grid layouts.
When should I use custom track sizes instead of equal columns?
Switch to custom tracks when you need an asymmetric layout — for example a fixed-width sidebar next to a flexible main content area, like 250px 1fr, or a layout mixing fixed, flexible and percentage-based columns such as 200px 1fr 20%. Mixing unit types in a single grid-template-columns value is a core strength of CSS Grid that Flexbox can't replicate as cleanly.
Is CSS Grid well supported in browsers?
Yes. CSS Grid has been fully supported without vendor prefixes in all major browsers — Chrome, Firefox, Safari and Edge — since 2017, including gap, repeat(), and mixed-unit track sizing. It's safe to use in any current production website or application.