CSS Grid Generator
Compose CSS Grid layouts visually and export the code.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, minmax(64px, auto));
gap: 16px;
}About CSS Grid Generator
CSS Grid is the only layout system on the web designed for two dimensions, and it removed the need for the float and table hacks that preceded it.
This generator lets you set track counts and sizes, adjust gaps, and place items across cells visually, then hands you the grid-template and grid-area declarations to paste into your stylesheet.
Frequently asked questions
What is the fr unit?
A fraction of the free space left after fixed-size tracks are laid out. Two tracks of 1fr each take half the remaining space.
When should I use grid instead of flexbox?
Grid controls rows and columns at once. Reach for it whenever alignment has to work in both directions.
What does auto-fit with minmax do?
It creates as many columns as fit at your minimum width and lets them grow to share the space - responsive grids without a single media query.