Design complex CSS Grid layouts visually. Generate clean CSS and HTML code based on columns, rows, and gap sizes.
CSS Grid Layout is a two-dimensional layout system that fundamentally changed how web developers structure page layouts. Unlike Flexbox (which controls layout along a single axis), CSS Grid controls both rows and columns simultaneously, enabling complex multi-area layouts that previously required tables, absolute positioning hacks, or JavaScript. Grid is now the recommended approach for page-level layout and complex component structures.
This visual CSS Grid generator creates grid container and item CSS declarations from a point-and-click interface. Define your column and row template, place items in specific grid areas, set gaps and alignment, and generate production-ready CSS code. The live preview renders your grid structure using actual CSS Grid, matching exactly what browsers will render.
The grid-template-columns property defines column widths using any CSS length unit or the special fr (fraction) unit. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle takes twice as much space as each side. The fr unit distributes available space after fixed and auto-sized content is placed — making it ideal for flexible-width columns that fill remaining space.
The repeat() function and auto-fill/auto-fit keywords enable responsive grids without media queries: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) creates as many 250px+ columns as fit the container, flowing to fewer columns on smaller screens. This intrinsic web design approach adapts layout to content and container size simultaneously.
The grid-template-areas property provides a visual ASCII-art representation of the layout directly in the CSS source: defining named areas that grid items are placed into using grid-area: header. This approach is uniquely self-documenting — the ASCII grid in the CSS visually depicts the intended layout, making it immediately readable to other developers.
Named areas can span multiple rows and columns naturally: a sidebar spanning three rows or a header spanning all columns requires no complex span calculations — simply repeat the area name across the desired grid cells in the template. Changing the layout for different screen sizes using media queries only requires redefining the grid-template-areas string, keeping each grid item's declaration stable.
CSS Grid is a two-dimensional layout system controlling both rows and columns simultaneously — ideal for overall page structure and 2D component layouts. Flexbox is one-dimensional, controlling items along a single axis (either row or column) — ideal for navigation bars, button groups, and aligning items within a single row or column. Modern layouts often use Grid for the outer structure and Flexbox for inner component alignment.
The fr (fraction) unit represents a fraction of the available space in the grid container, distributed after all fixed and auto-sized columns are placed. grid-template-columns: 1fr 2fr means the first column gets one-third and the second column gets two-thirds of the remaining space. fr units are only valid in grid contexts (grid-template-columns and grid-template-rows) and cannot be used elsewhere in CSS.
Use grid-column and grid-row with line numbers or span keyword: grid-column: 1 / 3 (from line 1 to line 3, spanning 2 columns), or grid-column: span 2 (span 2 columns from current position). When using named grid-template-areas, simply repeat the area name across multiple cells in the template string — span happens automatically.
Both keywords fill available space with as many columns as fit. The difference appears when grid items don't fill all columns: auto-fill creates empty tracks (ghost columns that occupy space), while auto-fit collapses empty tracks to zero width. For a grid where you want items to stretch to fill available space (like a card layout), auto-fit is usually preferred.
To center all grid items: add place-items: center on the grid container (shorthand for align-items + justify-items). To center a specific item within its grid area: add place-self: center on the item. To center the entire grid within the viewport: use place-content: center on the grid container (controls alignment of the grid tracks, not the items).