Flexbox 與 Grid
網格多列grid-rows
Style utility for creating multiple grid rows.
Overview
| Class | Declarations |
|---|---|
grid-rows:3 | display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, minmax(0, 1fr));
|
Basic usage
Create equal rows
Use grid-rows to create equal-height rows. It also sets display:grid and grid-auto-flow:column.
1
2
3
<div class="grid-rows:3"> <div>1</div><div>2</div><div>3</div></div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-rows:3:hover grid-rows:3@sm grid-rows:3@dark grid-rows:3@print">…</div>