Free Tool

CSS Grid Area Debugger

Paste your grid-template-areas value and I'll show you why the browser is throwing the whole template away — with the broken cells highlighted in red.

Why the grid collapses

A single grid item is always a rectangle. When you name regions, each name must form a solid rectangle — if it doesn't, the browser drops the ENTIRE grid-template-areas, items fall back to auto-placement, and pile into a corner.

1

Valid — every area is a rectangle

Both "nav" and "main" form a connected rectangle, so the template is valid.

grid-template-areas:
  "head head"
  "nav  main"
  "nav  main";
2

Broken — concave (L-shaped) area

"main" traces an L, not a rectangle — the whole property is invalid.

grid-template-areas:
  "head head"
  "nav  main"
  "main main";  /* ✗ */
3

Broken — split area

The same name appears in two separate places — also invalid.

grid-template-areas:
  "side head side"  /* ✗ */
  "side main ....";