Flexbox 與 Grid
網格自動欄寬grid-auto-columns
Setting the size of the grid columns.
Overview
| Class | Declarations |
|---|---|
grid-auto-columns:auto | grid-auto-columns: auto;
|
grid-auto-columns:min-content | grid-auto-columns: min-content;
|
grid-auto-columns:max-content | grid-auto-columns: max-content;
|
grid-auto-columns:<value> | grid-auto-columns: <value>;
|
grid-auto-columns:minmax(<min>,<max>) | grid-auto-columns: minmax(<min>,<max>);
|
Basic usage
Size implicit columns
Use grid-auto-columns to size columns created outside the explicit grid.
96px
A
B
C
<div class="grid grid-auto-flow:column"> <div class="grid-auto-columns:96px">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-columns:96px:hover grid-auto-columns:96px@sm grid-auto-columns:96px@dark grid-auto-columns:96px@print">…</div>