CSS Grid Generator
Build CSS Grid layouts visually with configurable columns, rows, gap, and sizing options.
Privacy first: Your files never leave your browser. All processing happens locally on your device.
Preview
1
2
3
4
5
6
CSS Code
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;Frequently Asked Questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system that allows you to create complex grid-based layouts with rows and columns simultaneously.
What does 1fr mean in CSS Grid?
The fr unit represents a fraction of the available space in the grid container, distributing remaining space proportionally.