CSS Grid Generator
Build CSS Grid layouts visually with live preview.
No content areas defined. Add an area to create spanning cells.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}How to Use the CSS Grid Generator
Adjust the column and row counts with the sliders, or type custom templates like "1fr 2fr 1fr" or "repeat(3, 1fr)" directly. Set column and row gaps to control spacing. The live preview updates instantly.
Click "+ Add Area" to define named content areas that span multiple cells. Set the column and row start/end values to control each area's position. Click "Copy CSS" to grab the generated code.
Frequently Asked Questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you arrange elements in rows and columns simultaneously. It is ideal for building complex page layouts.
What does "1fr" mean?
"fr" stands for fractional unit. "1fr" takes one equal share of the available space. "1fr 2fr" means the second column is twice as wide as the first.
What is the difference between gap and margin?
Gap controls the space between grid cells without adding space outside the container. Margins add space around the outside of individual elements.
Can I nest grids?
Yes. Any grid item can itself be a grid container. Just apply "display: grid" to the child element and define its own columns and rows.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →