grid

Set explicit tracks, implicit track sizes and auto flow with the native grid shorthand.

Overview

Examples

Set the native grid shorthand

grid:* sets the native CSS grid shorthand. It does not set display:grid; add the static grid utility to establish the container. Compare an explicit two-column template with grid:none, which returns the template and implicit-grid settings to their initial values.

<div id="layout" class="grid grid-template:48px|48px/80px|1fr grid-auto-flow:column gap-md w:17.5rem max-w:100%">  <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>

<div id="layout" class="grid grid:none gap-md w:17.5rem max-w:100%">  <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>

@layer utilities {  .grid {    display: grid  }  .grid\:none {    grid: none  }}

With none, the three items still participate in Grid. Default row auto-placement creates one column and three content-sized implicit rows. The 16px gap remains: grid does not reset gap. Use grid-template when you only intend to set the explicit template.

Define tracks and auto flow together

Use | for spaces and / between rows and columns. Before the slash, auto-flow|56px creates implicit 56px rows; after the slash, auto-flow|1fr creates implicit fractional columns. These two grids have the same two-by-two shape, but items 02 and 03 exchange positions.

<div id="layout" class="grid grid:auto-flow|56px/1fr|1fr gap-md w:17.5rem max-w:100%">  <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>

<div id="layout" class="grid grid:56px|56px/auto-flow|1fr gap-md w:17.5rem max-w:100%">  <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>

The shorthand sets the specified track sizes and flow direction and resets the other grid longhands it covers. It does not reset child placement. Prefer individual track or flow utilities when you intend to change just one setting.

Apply conditionally

Use conditional queries to change the layout at a real viewport width. The same four items form one column initially and two from sm. The 48px implicit row size stays unchanged.

<div id="layout" class="grid grid:auto-flow|48px/1fr gap-md w:17.5rem max-w:100% grid:auto-flow|48px/1fr|1fr@sm">  <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>