grid-template-areas

Name rectangular grid regions and map items into them.

Overview

Basic usage

Name areas in a grid

grid-template-areas names rectangular regions. Each quoted string describes one row; use \20 for spaces within that string and | between rows. Here head spans both columns, with nav and main below it.

<div id="layout" class="grid grid-template-areas:'head\20head'|'nav\20main' grid-template-columns:80px|1fr grid-template-rows:48px|96px gap-md w:17.5rem max-w:100%">  <header id="target" class="grid-area:head p-sm">Header</header>  <aside id="peer" class="grid-area:nav p-sm">Nav</aside>  <section id="item-3" class="grid-area:main p-sm">Content</section></div>

Place children with the matching grid-area name. Repeated names must form a filled rectangle, and every row must contain the same number of cells. Use . for an unnamed cell. The area map does not set track sizes: those are supplied separately here.

Setting grid-template-areas:none removes the named regions but leaves the children’s placement values intact. Reset their grid-area values too if the intention is to return them to auto-placement.

Apply conditionally

Use conditional queries to change the layout at a real viewport width. The named regions stack in one column initially. From sm, the header spans two columns and navigation sits beside content. The area map and track sizes change together; the children keep their names and source order.

<div id="layout" class="grid grid-template-areas:'head'|'nav'|'main' grid-template-columns:1fr grid-template-rows:48px|48px|96px gap-md w:17.5rem max-w:100% grid-template-areas:'head\20head'|'nav\20main'@sm grid-template-columns:80px|1fr@sm grid-template-rows:48px|96px@sm">  <header id="target" class="grid-area:head p-sm">Header</header>  <aside id="peer" class="grid-area:nav p-sm">Nav</aside>  <section id="item-3" class="grid-area:main p-sm">Content</section></div>