grid-template
Define explicit rows, columns and areas without resetting implicit grid settings.
Overview
| Class | Declarations |
|---|---|
grid-template:none | grid-template: none;
|
grid-template:<value> | grid-template: <value>;
|
grid-template:<rows>/<columns> | grid-template: <rows>/<columns>;
|
grid-template:<areas>|<rows>/<columns> | grid-template: <areas> <rows>/<columns>;
|
Basic usage
Define rows and columns together
grid-template sets explicit rows, columns and named areas. Put rows before / and columns after it. In the first example, the 224px height gives the second row 144px after the 64px first row and 16px gap.
<div id="layout" class="grid grid-template:64px|1fr/96px|1fr gap-md h:14rem 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-template:none grid-auto-columns:72px grid-auto-flow:column grid-auto-rows:48px 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>Generated CSS
@layer utilities { .grid-template\:64px\|1fr\/96px\|1fr { grid-template: 64px 1fr/96px 1fr }}Unlike grid, this shorthand leaves grid-auto-flow, grid-auto-rows and grid-auto-columns intact. The second example has no explicit template, yet its authored implicit columns remain 72px wide with column flow. The rows/columns form resets named areas to none; it does not establish display:grid.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. Four 48px rows initially fill one column. From sm, the same items use a 64px header row plus the remaining height, across two columns. The container height stays 240px.
<div id="layout" class="grid grid-template:repeat(4,48px)/1fr gap-md h:15rem w:17.5rem max-w:100% grid-template:64px|1fr/96px|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>