grid-template-rows

用于指定网格布局中行的工具类。

快速参考

类	属性
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-2 和 grid-rows-4 等 grid-rows-<number> 工具类，创建具有 n 行等高的网格：

01

02

03

04

05

06

07

08

09

<!-- [!code classes:grid-rows-4] -->
<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

<!-- [!code classes: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>

使用自定义值

使用 grid-rows-[<value>] 等工具类，按完全自定义的值设置行：

<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() 函数。

响应式设计

使用 md: 等断点变体作为 grid-template-rows 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

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

在变体文档中了解有关使用变体的更多信息。