CSS Grid Generator
Build a grid layout visually and copy the CSS.
How to build a CSS grid layout
Set how many columns and rows you need, plus the gaps between them. Choose "Equal (1fr)" for uniform tiles, "Auto" to let content size the columns, or "Responsive (minmax)" for grids that shrink gracefully on small screens.
The preview renders numbered cells so you can see exactly how items will flow into the grid. Copy the generated CSS and apply it to your container — place children inside and they fill the cells automatically in source order.
Grid is the right tool for two-dimensional layouts: page shells, card walls, dashboards and photo galleries. For simple one-dimensional rows or columns, flexbox is often lighter.
FAQ
What does 1fr mean?
"fr" is a fraction of the free space. Three columns of 1fr share available width equally; 2fr 1fr gives the first column twice the width of the second.
When should I use grid instead of flexbox?
Use grid when items must align in both rows and columns at once. Use flexbox when items flow in a single direction. They combine well: grid for the page shell, flexbox inside each card.
Is CSS Grid responsive?
Grid itself does not add breakpoints. The minmax preset handles shrinking automatically; for layout changes at specific widths, add a media query that overrides grid-template-columns.