Flexbox & Grid
grid-row
控制元素在網格列中大小和位置的工具程式。
| 類別 | 樣式 |
|---|---|
row-span-<number> | grid-row: span <number> / span <number>; |
row-(<custom-property>) | grid-row: var(<custom-property>); |
row-[<value>] | grid-row: <value>; |
row-start-<number> | grid-row-start: <number>; |
-row-start-<number> | grid-row-start: calc(<number> * -1); |
row-start-auto | grid-row-start: auto; |
row-start-(<custom-property>) | grid-row-start: var(<custom-property>); |
row-start-[<value>] | grid-row-start: <value>; |
row-end-<number> | grid-row-end: <number>; |
-row-end-<number> | grid-row-end: calc(<number> * -1); |
row-end-auto | grid-row-end: auto; |
row-end-(<custom-property>) | grid-row-end: var(<custom-property>); |
row-end-[<value>] | grid-row-end: <value>; |
範例
跨越多列
使用 row-span-<number> 工具程式，例如 row-span-2 和 row-span-4，使元素跨越 n 列
01
02
03
<div class="grid grid-flow-col grid-rows-3 gap-4"> <div class="row-span-3 ...">01</div> <div class="col-span-2 ...">02</div> <div class="col-span-2 row-span-2 ...">03</div></div>起始和結束線
使用 row-start-<number> 和 row-end-<number> 工具程式，例如 row-start-2 和 row-end-3，使元素在第 n 個網格線開始或結束
01
02
03
<div class="grid grid-flow-col grid-rows-3 gap-4"> <div class="row-span-2 row-start-2 ...">01</div> <div class="row-span-2 row-end-3 ...">02</div> <div class="row-start-1 row-end-4 ...">03</div></div>這些也可以與 row-span-<number> 工具程式結合使用，以跨越特定數量的列。
使用自訂值
使用類似以下的工具程式 row-[<value>],row-span-[<value>],row-start-[<value>],和 row-end-[<value>]來設定網格列大小和位置基於完全自訂的值
<div class="row-[span_16_/_span_16] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 row-(<custom-property>) 語法
<div class="row-(--my-rows) ..."> <!-- ... --></div>這只是 row-[var(<custom-property>)] 的簡寫，會自動為您新增 var() 函數。
響應式設計
前綴 grid-row,grid-row-start,和 grid-row-end工具程式 使用斷點變體（例如 md:）以僅在中型 螢幕尺寸及以上套用該工具程式
<div class="row-span-3 md:row-span-4 ..."> <!-- ... --></div>深入了解如何在variants 文件中使用變體。
