Syntax
grid-template
Setting grid columns, grid rows, and grid areas.
Overview
| Class | Declarations |
|---|---|
grid-template:`value` | grid-template: `value`;
|
grid-template:`rows`/`columns` | grid-template: `rows`/`columns`;
|
grid-template:`areas`|`rows`/`columns` | grid-template: `areas` `rows`/`columns`;
|
grid-template:none | grid-template: none;
|
Basic usage
Define rows and columns together
Use grid-template to set grid rows and columns in one shorthand.
Nav
Header
Main
<div class="grid grid-template:64px|1fr/120px|1fr">…</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-template:64px|1fr/120px|1fr:hover grid-template:64px|1fr/120px|1fr@sm grid-template:64px|1fr/120px|1fr@dark grid-template:64px|1fr/120px|1fr@print">…</div>