Flexbox 與 Grid
網格模板欄grid-template-columns
Creating columns in a grid layout.
Overview
| Class | Declarations |
|---|---|
grid-template-columns:none | grid-template-columns: none;
|
grid-template-columns:min-content | grid-template-columns: min-content;
|
grid-template-columns:max-content | grid-template-columns: max-content;
|
grid-template-columns:96px|1fr|72px | grid-template-columns: 96px 1fr 72px;
|
grid-template-columns:repeat(3,1fr) | grid-template-columns: repeat(3,1fr);
|
grid-template-columns:fit-content(12rem) | grid-template-columns: fit-content(12rem);
|
grid-template-columns:minmax(0,1fr)|2fr | grid-template-columns: minmax(0,1fr) 2fr;
|
Basic usage
Define explicit columns
Use grid-template-columns to define the track list for grid columns.
96px
1fr
72px
<div class="grid grid-template-columns:96px|1fr|72px">…</div>Use minmax
<div class="grid grid-template-columns:minmax(0,1fr)|2fr">…</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-template-columns:96px|1fr|72px:hover grid-template-columns:96px|1fr|72px@sm grid-template-columns:96px|1fr|72px@dark grid-template-columns:96px|1fr|72px@print">…</div>