Visually design CSS Grid layouts by setting columns, rows, gaps, and alignment. Get production-ready CSS code instantly. Free, no-code grid builder.
This visual tool generates CSS Grid code in real-time. Define your columns, rows, and gap, choose from preset layouts (3-column, sidebar, holy grail), and get production-ready CSS you can copy directly into your project.
| Property | Purpose | Example |
|---|---|---|
grid-template-columns | Define column widths | 1fr 1fr 1fr |
grid-template-rows | Define row heights | auto 1fr auto |
gap | Space between cells | 16px |
grid-column | Item column span | 1 / -1 (full width) |
grid-template-areas | Named layout zones | "header header" "sidebar main" |
fr unit | Fractional space unit | 2fr = twice the space |
fr (fraction) unit represents a fraction of the available space in the grid container. 1fr 1fr 1fr creates three equal-width columns. 2fr 1fr creates two columns where the first is twice as wide as the second.grid-template-areas lets you name grid areas and assign elements to them using the grid-area property. It creates visual, readable layouts like the classic holy grail layout with header, sidebar, main, aside, and footer.