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-(<custom-property>) | grid-auto-rows: var(<custom-property>); |
auto-rows-[<value>] | grid-auto-rows: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用像 auto-rows-min
和 auto-rows-max
这样的工具来控制隐式创建的网格行的大小:
¥Use utilities like auto-rows-min
and auto-rows-max
to control the size of implicitly-created grid rows:
<div class="grid grid-flow-row auto-rows-max"> <div>01</div> <div>02</div> <div>03</div></div>
使用自定义值(Using a custom value)
¥Using a custom value
使用 auto-rows-[<value>]
语法 根据完全自定义的值设置 size of implicitly-created grid rows:
<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()
函数。
响应式设计(Responsive design)
¥Responsive design
在 grid-auto-rows
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="grid grid-flow-row auto-rows-max md:auto-rows-min ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。