Flexbox 與 Grid
網格模板grid-template
Setting grid columns, grid rows, and grid areas.
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
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>