Flexbox & Grid
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-(<自定义属性>) | grid-auto-rows: var(<自定义属性>); |
auto-rows-[<值>] | grid-auto-rows: <值>; |
示例
基本示例
使用 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-[<值>] 语法 来设置隐式创建的网格行的大小基于完全自定义的值
<div class="auto-rows-[minmax(0,2fr)] ..."> <!-- ... --></div>对于 CSS 变量，您还可以使用 auto-rows-(<自定义属性>) 语法
<div class="auto-rows-(--my-auto-rows) ..."> <!-- ... --></div>这只是 auto-rows-[var(<自定义属性>)] 的简写，会自动为您添加 var() 函数。
响应式设计
前缀将 grid-auto-rows 实用工具 与断点变体（如 md:）一起使用，以便仅在中等 屏幕尺寸及以上应用该实用工具
<div class="grid grid-flow-row auto-rows-max md:auto-rows-min ..."> <!-- ... --></div>在变体文档中了解有关使用变体的更多信息。
