Flexbox 與 Grid
網格多欄grid-columns
Style utility for creating multiple grid columns.
Overview
| Class | Declarations |
|---|---|
grid-cols:<integer> | display: grid;
grid-template-columns: repeat(<integer>, minmax(0, 1fr));
|
Basic usage
Create equal columns
Use grid-cols to create an equal-width column grid. It also sets display:grid.
1
2
3
<div class="grid-cols: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-cols:3:hover grid-cols:3@sm grid-cols:3@dark grid-cols:3@print">…</div>