Create CSS Grid layouts visually. Adjust columns, rows, and gaps. Customize individual column and row sizes using fr units, px, or auto. See the grid update in real-time and copy the generated CSS. Great for prototyping grid layouts quickly.
CSS Grid is the most powerful layout system in CSS, designed for two-dimensional layouts where you need precise control over both rows and columns simultaneously. Unlike Flexbox (one dimension), Grid handles page layouts, card grids, dashboards, and complex component arrangements. This generator provides a visual interface for creating Grid layouts: define your column and row template, set gaps, place items across cells, and see the result live. Grid's learning curve can be steep — properties like grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) are powerful but cryptic. This tool lets you build visually and learn the syntax as you go.
Grid: page layouts, image galleries, dashboards, any 2D layout. Flexbox: navigation bars, card rows, form layouts, any 1D layout. They complement each other — use both in the same project.
fr (fraction) represents a share of available space. 1fr 2fr means two columns where the second is twice as wide as the first. It's like flex-grow but for grid tracks.
Both create responsive grids. auto-fill creates as many tracks as fit, keeping empty tracks. auto-fit collapses empty tracks, letting items stretch. auto-fit is usually what you want for responsive card grids.
place-items: center on the container centers all items. For individual items: place-self: center. Or use the old faithful: margin: auto on the grid item.
Yes — grid-template-areas lets you draw your layout in ASCII art: 'header header' 'sidebar main' 'footer footer'. Then assign items with grid-area: header. Very readable for page layouts.