grid-area

Place a grid item using four line boundaries or a named area.

Overview

Basic usage

Place an item by grid lines

grid-area takes four values: row-start, column-start, row-end, then column-end. The blue content starts at row line 2 and column line 2, and ends at line 4 on both axes. It covers two rows and two columns, including their internal gaps.

<div id="layout" class="grid grid-cols:3 grid-template-rows:48px|64px|64px gap-md w:17.5rem max-w:100%">  <header id="peer" class="grid-area:1/1/2/4 p-sm">Header</header>  <aside id="item-3" class="grid-area:2/1/4/2 p-sm">Nav</aside>  <section id="target" class="grid-area:2/2/4/4 p-sm">Content</section></div>

A three-track axis has four boundary lines. Line numbers follow the grid container’s writing mode; these examples use horizontal left-to-right writing. Explicitly assigning the same cells to multiple items can overlap them: placement is separate from paint order.

Span tracks

Use span|2 for an end value to cover two tracks from the starting line. Here 2/2/span|2/span|2 starts at line 2 in both directions. The three automatic siblings fill the first row while the blue panel spans the lower-right four cells.

<div id="layout" class="grid grid-cols:3 grid-template-rows:repeat(3,48px) gap-md w:17.5rem max-w:100%">  <div id="target" class="grid-area:2/2/span|2/span|2 p-sm">2 × 2 tracks</div>  <div id="peer" class="p-sm">01</div>  <div id="item-3" class="p-sm">02</div>  <div id="item-4" class="p-sm">03</div></div>

The span counts tracks, not pixels. Changing a track size or gap changes the panel’s size without changing its placement.

Use a named area

Use an area name from the parent’s grid-template-areas. The blue hero region covers both columns in the first row. The track lists supply its 64px height and the lower row’s 80px height.

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

Use \20 for a space inside a quoted row. A name is a placement reference; it does not create that region or its dimensions on its own.

Apply conditionally

Use conditional queries to change the layout at a real viewport width. The blue item begins in normal auto-placement. From sm, it occupies the lower-right two-by-two region; the siblings remain auto-placed in the same three-column grid.

<div id="layout" class="grid grid-cols:3 grid-template-rows:repeat(3,48px) gap-md w:17.5rem max-w:100%">  <div id="target" class="grid-area:auto p-sm grid-area:2/2/span|2/span|2@sm">Target</div>  <div id="peer" class="p-sm">01</div>  <div id="item-3" class="p-sm">02</div>  <div id="item-4" class="p-sm">03</div></div>