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

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-(<custom-property>)

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

auto-rows-[<value>]

grid-auto-rows: <value>;

示例

使用类似 auto-rows-min 和 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() 函数。

前缀一个 grid-auto-rows 实用工具带有断点变体（如 md:），以仅在中等屏幕尺寸及以上时应用该实用工具

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

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