Flexbox 與 Grid
網格區域grid-area
Setting a size and location within a grid.
Overview
| Class | Declarations |
|---|---|
grid-area:auto | grid-area: auto;
|
grid-area:<name> | grid-area: <name>;
|
grid-area:<row-start>/<column-start>/<row-end>/<column-end> | grid-area: <row-start>/<column-start>/<row-end>/<column-end>;
|
grid-area:<row-start>/<column-start>/span|<row-span>/span|<column-span> | grid-area: <row-start>/<column-start>/span <row-span>/span <column-span>;
|
Basic usage
Place an item by grid lines
Use grid-area to place a grid item by row-start / column-start / row-end / column-end.
grid-area:1/1/2/4
Header
2/1/4/2
Nav
2/2/4/4
Content
<div class="grid grid-cols:3 grid-template-rows:64px|88px|88px"> <header class="grid-area:1/1/2/4">Header</header> <nav class="grid-area:2/1/4/2">Navigation</nav> <main class="grid-area:2/2/4/4">Content</main></div>Span tracks
Use span values when the item should cover a number of rows or columns from its starting line.
2/2/span 2/span 2
Featured
Toolbar
Aside
Notes
<section class="grid-area:2/2/span|2/span|2">Featured panel</section>Use a named area
grid-area also accepts a custom identifier that matches a named area from grid-template-areas.
<section class="grid-area:hero">Hero</section>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-area:auto:hover grid-area:auto@sm grid-area:auto@dark grid-area:auto@print">…</div>