Flexbox & Grid
grid-template-rows
用於指定網格佈局中列的實用工具。
| 類別 | 樣式 |
|---|---|
grid-rows-<數字> | grid-template-rows: repeat(<數字>, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
grid-rows-subgrid | grid-template-rows: subgrid; |
grid-rows-[<值>] | grid-template-rows: <值>; |
grid-rows-(<自訂屬性>) | grid-template-rows: var(<自訂屬性>); |
範例
指定網格列
使用 grid-rows-<數字> 實用工具，如 grid-rows-2 和 grid-rows-4 來建立具有 n 個相等大小的列的網格
01
02
03
04
05
06
07
08
09
<div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>實作子網格
使用 grid-rows-subgrid 實用工具來採用項目父元素定義的列軌道
01
02
03
04
05
06
07
08
09
10
<div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="row-span-3 grid grid-rows-subgrid gap-4"> <div class="row-start-2">06</div> </div> <div>07</div> <!-- ... --> <div>10</div></div>使用自訂值
使用 grid-rows-[<值>] 語法 來設定列基於完全自訂的值
<div class="grid-rows-[200px_minmax(900px,1fr)_100px] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 grid-rows-(<自訂屬性>) 語法
<div class="grid-rows-(--my-grid-rows) ..."> <!-- ... --></div>這只是 grid-rows-[var(<自訂屬性>)] 的簡寫，會自動為您新增 var() 函式。
響應式設計
前綴使用 grid-template-rows 實用工具 加上像 md: 的斷點變體，使其僅在中 螢幕尺寸以上套用
<div class="grid grid-rows-2 md:grid-rows-6 ..."> <!-- ... --></div>在變體文件中瞭解更多關於使用變體的資訊。
