Flexbox 與 Grid
網格自動列高grid-auto-rows
Setting the size of the grid rows.
Overview
| Class | Declarations |
|---|---|
grid-auto-rows:auto | grid-auto-rows: auto;
|
grid-auto-rows:min-content | grid-auto-rows: min-content;
|
grid-auto-rows:max-content | grid-auto-rows: max-content;
|
grid-auto-rows:<value> | grid-auto-rows: <value>;
|
grid-auto-rows:minmax(<min>,<max>) | grid-auto-rows: minmax(<min>,<max>);
|
Basic usage
Size implicit rows
Use grid-auto-rows to size rows created outside the explicit grid.
64px row
A
B
C
<div class="grid grid-cols:2 grid-auto-rows:64px"> <div>A</div><div>B</div><div>C</div></div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-auto-rows:64px:hover grid-auto-rows:64px@sm grid-auto-rows:64px@dark grid-auto-rows:64px@print">…</div>