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.
How CSS Grid Generator works in your browser
You set the number and size of rows and columns, including fr units, and the gap between them. The preview is a real CSS Grid container, and item placement is written out as grid-area declarations alongside the grid-template values for the container.
Because grid controls both dimensions at once, it suits page layouts and galleries where alignment must hold across rows and columns together.
When to use it
- Sketching a page layout with a header, sidebar and content area.
- Building a responsive card gallery and exporting the CSS.
- Learning how fr units share space after fixed tracks are laid out.
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.