grid-template-rows

用於指定 grid 佈局中列的通用類別。

Class Styles

Class	Styles
`grid-rows-<number>`	`grid-template-rows: repeat(<number>, minmax(0, 1fr));`
`grid-rows-none`	`grid-template-rows: none;`
`grid-rows-subgrid`	`grid-template-rows: subgrid;`
`grid-rows-[<value>]`	`grid-template-rows: <value>;`
`grid-rows-(<custom-property>)`	`grid-template-rows: var(<custom-property>);`

grid-rows-<number>

grid-template-rows: repeat(<number>, minmax(0, 1fr));

grid-rows-none

grid-template-rows: none;

grid-rows-subgrid

grid-template-rows: subgrid;

grid-rows-[<value>]

grid-template-rows: <value>;

grid-rows-(<custom-property>)

grid-template-rows: var(<custom-property>);

範例（Examples）

指定 grid 列數（Specifying the grid rows）

使用 grid-rows-<number> 等通用類別（如 grid-rows-2 和 grid-rows-4）建立具有 n 個等高列的 grid：

<div class="grid grid-flow-col grid-rows-4 gap-4">  <div>01</div>  <!-- ... -->  <div>09</div></div>

實作子網格（Implementing a subgrid）

使用 grid-rows-subgrid 通用類別採用由項目父元素定義的列軌道：

<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>

使用自訂值（Using a custom value）

使用 grid-rows-[<value>] 語法，根據完全自訂的值來設定 rows：

<div class="grid-rows-[200px_minmax(900px,1fr)_100px] ...">  <!-- ... --></div>

對於 CSS 變數，你也可以使用 grid-rows-(<custom-property>) 語法：

<div class="grid-rows-(--my-grid-rows) ...">  <!-- ... --></div>

這只是 grid-rows-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

響應式設計（Responsive design）

在 grid-template-rows 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<div class="grid grid-rows-2 md:grid-rows-6 ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。