Flexbox & Grid
grid-auto-rows
控制隱含建立的網格列大小的工具。
| 類別 | 樣式 |
|---|---|
auto-rows-auto | grid-auto-rows: auto; |
auto-rows-min | grid-auto-rows: min-content; |
auto-rows-max | grid-auto-rows: max-content; |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |
auto-rows-(<自訂屬性>) | grid-auto-rows: var(<自訂屬性>); |
auto-rows-[<值>] | grid-auto-rows: <值>; |
範例
基本範例
使用像 auto-rows-min 和 auto-rows-max 這類的工具來控制隱含建立的網格列的大小
<div class="grid grid-flow-row auto-rows-max"> <div>01</div> <div>02</div> <div>03</div></div>使用自訂值
使用 auto-rows-[<值>] 語法 來設定隱含建立的網格列的大小基於完全自訂的值
<div class="auto-rows-[minmax(0,2fr)] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 auto-rows-(<自訂屬性>) 語法
<div class="auto-rows-(--my-auto-rows) ..."> <!-- ... --></div>這只是 auto-rows-[var(<自訂屬性>)] 的簡寫，會自動為您加入 var() 函式。
響應式設計
前綴將 grid-auto-rows 工具 加上像 md: 這類的斷點變體，僅在中型 螢幕尺寸及以上套用此工具
<div class="grid grid-flow-row auto-rows-max md:auto-rows-min ..."> <!-- ... --></div>深入了解如何在變體文件中使用變體。
