Flexbox 與 Grid
網格列grid-row
Setting a grid items's size and location in a grid layout.
Overview
| Class | Declarations |
|---|---|
grid-row:1/3 | grid-row: 1/3;
|
grid-row-span:2 | grid-row: span 2/span 2;
|
grid-row-start:1 | grid-row-start: 1;
|
grid-row-end:3 | grid-row-end: 3;
|
Basic usage
Place an item by rows
Use grid-row to place an item between row grid lines.
grid-row:1/3
Item
A
B
<div class="grid-row:1/3">Item</div>Span rows
<div class="grid-row-span:2">Spans two rows</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-row:1/3:hover grid-row:1/3@sm grid-row:1/3@dark grid-row:1/3@print">…</div>