CSS Grid Generator

Visual CSS Grid layout builder. Define columns and rows with flexible units (fr, px, auto, minmax), set gaps, place items into grid areas, and see the result live.

Layout presets: Start from common patterns like Holy Grail (header, sidebars, main, footer), Dashboard (4-column card grid), Card Grid, or Sidebar + Content, then customize freely. Copy clean CSS for both the container and individual items.

All layout building happens in your browser — no data is transmitted anywhere.

CSS Grid is the most powerful layout system available in CSS. Unlike Flexbox, which operates on a single axis, Grid lets you control both rows and columns simultaneously, making it ideal for full-page layouts, dashboard interfaces, card grids, and any design that requires precise two-dimensional control.

The grid-template-columns and grid-template-rows properties define the structure of your grid. Each value in the list creates a track (column or row). The fr (fraction) unit is the most important Grid unit — it distributes available space proportionally. A template of 1fr 2fr 1fr creates three columns where the middle one is twice as wide as the outer ones. Combined with fixed units like px and auto, fr gives you precise control over how space is allocated.

The minmax() function is essential for responsive Grid layouts. It defines a size range: minmax(200 px, 1fr) means the track should be at least 200 px wide but can grow to fill available space. A common responsive pattern is repeat(auto-fit, minmax(300 px, 1fr)) which creates as many 300 px columns as fit in the container and stretches them to fill the space — all without media queries.

Grid gaps (row-gap and column-gap, or the shorthand gap) add consistent spacing between tracks without adding margins to the items. This is cleaner than the older margin-based spacing approach and works perfectly with responsive layouts.

Grid template areas provide the most readable way to define complex layouts. Instead of positioning items by line numbers, you name areas with ASCII-art-like strings: "header header" "sidebar main" "sidebar footer". This makes the layout intent immediately clear and is easy to modify. Template areas are particularly useful for full-page layouts with header, navigation, content, and footer regions.

The Holy Grail layout — a header, two sidebars, main content, and footer — is one of the most common page-level grid patterns. It was notoriously difficult to implement before CSS Grid, requiring float hacks or complex Flexbox nesting. With Grid, it is a simple template-areas definition.

Dashboard layouts typically use a multi-column grid for cards and widgets. A 4-column grid with auto rows creates a flexible card layout that fills the available space. Cards can span multiple columns or rows using grid-column and grid-row properties.

Responsive grid techniques: Use auto-fit or auto-fill with minmax() for automatic responsive columns. Change grid-template-areas at different breakpoints for completely different layouts at each screen size. Use min() or max() to set upper and lower bounds on track sizes.