Lzh on GitHub

grid-auto-rows

控制隐式创建的网格行大小的实用工具。

快速参考

类名样式
auto-rows-autogrid-auto-rows: auto;
auto-rows-mingrid-auto-rows: min-content;
auto-rows-maxgrid-auto-rows: max-content;
auto-rows-frgrid-auto-rows: minmax(0, 1fr);
auto-rows-(<custom-property>)grid-auto-rows: var(<custom-property>);
auto-rows-[<value>]grid-auto-rows: <value>;
为grid布局父容器属性。

示例

基本示例

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

响应式设计

使用断点变体（例如 md:）作为 grid-auto-rows 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

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