1. Flexbox 和 Grid
  2. grid-auto-rows

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-minauto-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>

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号