CSS Grid Generator
Visually design CSS Grid layouts and copy the generated CSS code with one click.
3
3
8px
repeat(3, 1fr)
repeat(3, 1fr)
Preview
1
2
3
4
5
6
7
8
9
Click a cell to select it.
CSS Output
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}How to Use: Drag the Columns and Rows sliders to set your grid size, adjust the Gap, and choose a unit (fr, px, or auto) for column and row templates. The live preview updates instantly. Click Copy to grab the ready-to-use CSS.
Who It's For: Front-end developers learning CSS Grid, UI designers prototyping layouts, anyone who wants to skip writing boilerplate grid CSS by hand.
Features: Up to 12 columns × 12 rows, fr / px / auto unit selection, gap control (0–48 px), desktop / tablet / mobile preview widths, one-click CSS copy.
FAQ: Q. What is the fr unit? A. fr (fraction) divides available space proportionally — e.g., 1fr 1fr 1fr creates three equal columns. Q. Can I paste the output directly? A. Yes, apply the CSS to a .grid-container class and it works immediately.
Tips: Switch to the mobile preview to check how your grid looks on narrow screens before you ship.