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-<number>	grid-auto-rows: calc(var(--spacing) * <number>);
auto-rows-(<custom-property>)	grid-auto-rows: var(<custom-property>);
auto-rows-[<value>]	grid-auto-rows: <value>;

示例

基础示例

使用 auto-rows-min 和 auto-rows-max 等工具类，控制隐式创建的网格行尺寸：

<!-- [!code classes:auto-rows-max] -->
<div class="grid grid-flow-row auto-rows-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

使用自定义值

使用 auto-rows-[<value>] 等工具类，按完全自定义的值设置隐式创建的网格行尺寸：

<div class="auto-rows-[minmax(0,2fr)] ...">
 <!-- ... -->
</div>

对于 CSS 变量，你也可以使用 auto-rows-(<custom-property>) 语法：

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

这只是 auto-rows-[var(<custom-property>)] 的简写，会自动为你添加 var() 函数。

响应式设计

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

<div class="grid grid-flow-row auto-rows-max md:auto-rows-min ...">
 <!-- ... -->
</div>

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