gap
Space Grid and Flex items using actual row and column gaps.
Overview
| Class | Declarations |
|---|---|
gap:<size> | gap: <size>;
|
gap:<row-gap>|<col-gap> | gap: <row-gap> <col-gap>;
|
gap-x:<col-gap> | column-gap: <col-gap>;
|
gap-y:<row-gap> | row-gap: <row-gap>;
|
column-gap:<col-gap> | column-gap: <col-gap>;
|
row-gap:<row-gap> | row-gap: <row-gap>;
|
Examples
Add the same gap on both axes
gap-md leaves 16px between both rows and columns in this six-item grid. There is no extra gap at the outside edge, and the children have no margins. Track widths share the space left after the two column gaps.
<div id="layout" class="grid-cols:3 grid-auto-rows:48px gap-md w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div> <div id="item-6" class="p-sm">06</div></div>Set row and column gaps separately
gap-y:* sets row-gap; gap-x:* sets column-gap. Both grids below use 24px between rows and 12px between columns. The two-value shorthand puts row-gap first.
<!-- Separate row and column gaps --><div id="layout" class="grid-cols:3 grid-auto-rows:48px w:17.5rem max-w:100% gap-x-sm gap-y-lg" role="group" aria-label="Available space"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div> <div id="item-6" class="p-sm">06</div></div><!-- Two-value shorthand --><div id="layout" class="grid-cols:3 grid-auto-rows:48px gap:var(--spacing-lg)|var(--spacing-sm) w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div> <div id="item-6" class="p-sm">06</div></div>In horizontal Grid writing, rows stack vertically and columns run horizontally. These physical directions change with writing mode. In Flexbox, which gap separates items or lines also depends on flex-direction.
Use gap for component internals
Gap works on the actual component layout. This flex row places a 32px avatar beside its label with a 12px gap. items-center aligns their centers without adding margin to either child.
<div id="layout" class="flex items-center gap-sm w:17.5rem max-w:100%" role="group" aria-label="Available space"> <img id="target" class="block flex-shrink:0 width:2rem height:2rem round object-cover" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /> <span id="peer">Aron · Design systems</span></div>Apply conditionally
Resize past sm to increase the grid’s gaps from 8px to 24px. The container stays 280px wide, so its three flexible columns become narrower as the gaps grow.
<div id="layout" class="grid-cols:3 grid-auto-rows:48px gap-xs w:17.5rem max-w:100% gap-lg@sm" role="group" aria-label="Available space"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div> <div id="item-6" class="p-sm">06</div></div>