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