CSS Grid Generator

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web — it lets you control rows and columns simultaneously, making it the right tool for overall page structure. Unlike Flexbox, which works along a single axis at a time, Grid gives you a coordinate system where items can be explicitly placed anywhere across rows and columns. That's what makes it ideal for defining the skeleton of a page: the header, sidebar, main content area, and footer can all be positioned in a single declaration, without floats, positioning hacks, or nested containers.

Set display: grid on a container and its direct children become grid items that respond to the grid's rules. CSS Grid is fully supported in every modern browser (Chrome, Firefox, Safari, Edge) without vendor prefixes and has been Baseline available since 2017.

How to use this free CSS grid builder

Start with a preset (Holy Grail, Blog, Dashboard) to load a real-world layout instantly — then customise from there. Use the Grid tab to set the number of columns and rows, adjust the gap between tracks, and set a custom size for each track independently. Switch to the Areas tab to paint named grid areas: click on any empty cell in the canvas, drag to another cell to define a rectangular region, release, and type a name. The Align tab controls how items sit within their grid cells and how the tracks distribute within the container. When your layout looks right, copy the CSS (which includes grid-template-areas) or the semantic HTML.

Understanding grid tracks

A track is a single column or row in a CSS Grid. Each track has a size that controls how much space it occupies. The most important unit is 1fr — the fractional unit. One fr represents one fraction of the available space after all fixed-size and auto tracks are placed. Three equal 1fr columns divide all available width into thirds; 2fr 1fr gives the first column twice the space of the second. The fr unit distributes remaining space — so 200px 1fr 1fr allocates 200px to the first column and splits the rest equally.

Other useful track sizes:

• auto — the track sizes to fit its content; ideal for header and footer rows that should be as tall as their text.
• 200px — a fixed pixel size; use for sidebars or navigation panels that should not flex.
• minmax(200px, 1fr) — at least 200px, can grow to fill available space. The go-to for responsive column layouts.
• repeat(3, 1fr) — shorthand for three equal tracks; equivalent to 1fr 1fr 1fr.
• repeat(auto-fill, minmax(240px, 1fr)) — creates as many columns as fit at 240px each, then stretches them to fill remaining space. The standard responsive card grid pattern — no media queries needed.

How grid-template-areas works

grid-template-areas is a CSS property that lets you name rectangular regions of your grid using a visual ASCII-like map. Each quoted string represents one row; names in the same position across adjacent rows merge into a single area spanning those rows. A dot (.) marks an empty cell that belongs to no named area.

Example for a classic blog layout:

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "article sidebar"
    "footer  footer";
  gap: 24px;
}

.header  { grid-area: header; }
.article { grid-area: article; }
.sidebar { grid-area: sidebar; }
.footer  { grid-area: footer; }

This approach produces semantic, self-documenting CSS where the visual layout map directly mirrors what renders in the browser. It is far easier to maintain than coordinate-based shorthand like grid-column: 2 / 4; grid-row: 1 / 3. The only constraint: every named area must form a contiguous rectangle. L-shapes, T-shapes, and discontinuous spans are invalid and will silently cause the entire grid-template-areas declaration to be ignored.

Grid vs Flexbox: when to use which

CSS Grid and Flexbox are complementary tools designed for different scenarios. Grid is two-dimensional — use it for the overall page structure where you need to control both rows and columns simultaneously. Flexbox is one-dimensional — use it for components within the grid where items flow along a single axis: navigation bars, card headers, button groups, and tag lists.

The standard pattern is to combine both: CSS Grid defines the page skeleton (header, sidebar, main, footer), and Flexbox handles the layout inside each area. For example, the navigation bar inside the header uses display: flex; justify-content: space-between; align-items: center, while the page itself uses CSS Grid with named areas. See the CSS Flexbox Generator for the inner-component side of this pattern.