Loading Shrinkify...
Loading Shrinkify...
Build responsive CSS Grid layouts visually and copy production-ready CSS code.
All processing runs locally in your browser. Generated CSS is never uploaded.
CSS Grid has an expressive syntax that takes practice to internalize. The CSS Grid Generator lets you compose layouts visually — columns, rows, gap, areas — and outputs production-ready CSS code you can copy directly into your stylesheet.
grid-template-columns — defines column widthsgrid-template-rows — defines row heightsgap — spacing between cellsgrid-template-areas — named layout zonesFor single-axis layouts, use the Flexbox Generator instead.
Grid handles two-dimensional layouts (rows and columns simultaneously). Flexbox handles single-axis layouts more intuitively.
A fractional unit that distributes available space proportionally. 1fr 2fr gives the second column twice the width of the first.
Yes. Grid items can themselves be grid containers, enabling complex layout compositions.
Check out our technical guides to learn more about how browser-side processing works.
Read Glossary