Flexbox 與 Grid
網格模板區域grid-template-areas
Setting areas in the grid container
Overview
| Class | Declarations |
|---|---|
grid-template-areas:none | grid-template-areas: none;
|
grid-template-areas:'head_head'|'nav_main' | grid-template-areas: 'head_head' 'nav_main';
|
Basic usage
Name areas in a grid
Use grid-template-areas to define named layout regions, then place children with grid-area.
Head
Nav
Main
<div class="grid grid-template-areas:'head_head'|'nav_main'"> <header class="grid-area:head">Head</header> <nav class="grid-area:nav">Nav</nav> <main class="grid-area:main">Main</main></div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-template-areas:none:hover grid-template-areas:none@sm grid-template-areas:none@dark grid-template-areas:none@print">…</div>