1. Flexbox & Grid
  2. grid-row

Flexbox & Grid

grid-row

用于控制元素在网格行中大小和位置的实用工具。

样式
row-span-<number>
grid-row: span <number> / span <number>;
row-(<custom-property>)
grid-row: var(<custom-property>);
row-[<value>]
grid-row: <value>;
row-start-<number>
grid-row-start: <number>;
-row-start-<number>
grid-row-start: calc(<number> * -1);
row-start-auto
grid-row-start: auto;
row-start-(<custom-property>)
grid-row-start: var(<custom-property>);
row-start-[<value>]
grid-row-start: <value>;
row-end-<number>
grid-row-end: <number>;
-row-end-<number>
grid-row-end: calc(<number> * -1);
row-end-auto
grid-row-end: auto;
row-end-(<custom-property>)
grid-row-end: var(<custom-property>);
row-end-[<value>]
grid-row-end: <value>;

示例

跨越行

使用 row-span-<number> 实用工具,例如 row-span-2row-span-4,使元素跨越 n

01
02
03
<div class="grid grid-flow-col grid-rows-3 gap-4">  <div class="row-span-3 ...">01</div>  <div class="col-span-2 ...">02</div>  <div class="col-span-2 row-span-2 ...">03</div></div>

起始和结束线

使用 row-start-<number>row-end-<number> 实用工具,例如 row-start-2row-end-3,使元素在第 n 条网格线开始或结束

01
02
03
<div class="grid grid-flow-col grid-rows-3 gap-4">  <div class="row-span-2 row-start-2 ...">01</div>  <div class="row-span-2 row-end-3 ...">02</div>  <div class="row-start-1 row-end-4 ...">03</div></div>

这些还可以与 row-span-<number> 实用工具组合使用,以跨越特定数量的行。

使用自定义值

使用实用工具,例如 row-[<value>]row-span-[<value>]row-start-[<value>]row-end-[<value>]设置网格行大小和位置基于完全自定义的值

<div class="row-[span_16_/_span_16] ...">  <!-- ... --></div>

对于 CSS 变量,您也可以使用 row-(<custom-property>) 语法

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

这只是 row-[var(<custom-property>)] 的简写,会自动为您添加 var() 函数。

响应式设计

前缀 grid-rowgrid-row-startgrid-row-end实用工具 使用诸如 md: 之类的断点变体,仅在中等 屏幕尺寸及以上应用该实用工具

<div class="row-span-3 md:row-span-4 ...">  <!-- ... --></div>

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策