理解 CSS Grid 中 grid-row 属性的核心概念，掌握水平网格线的编号规则
掌握 Tailwind CSS 中 row-span-{n} 类的使用，实现元素垂直跨越多个行的效果
学会利用 row-start-{n} 和 row-end-{n} 精确控制元素在垂直方向上的起始和结束位置
能够组合使用跨行与定位类，构建复杂的“圣杯布局”、仪表盘侧边栏或非对称杂志式排版
与列控制类似，行控制的核心在于理解水平网格线。
水平网格线：想象网格是由水平线划分的。在一个定义了 grid-rows-3 的容器中，实际上有 4 条水平线（从第 1 条顶部线到第 4 条底部线）。
跨度：指一个元素在垂直方向上占据了多少个“轨道”（行高）。
定位：指元素从哪条水平线开始，到哪条水平线结束。
Tailwind CSS 将这些属性封装为直观的类名，让你能够轻松打破常规的行排列，创造出视觉冲击力强的布局。
注意：水平网格线的编号也是从 1 开始（顶部），向下递增。如果容器定义为
grid-rows-4，则存在的网格线编号为 1, 2, 3, 4, 5。
row-span 是最常用的行控制类，用于让某个元素在垂直方向上占据多个行的高度。这在创建“侧边导航栏”、“长图展示”或“突出显示的关键指标”时非常有用。
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-1">占 1 行</div>
<div class="row-span-2">占 2 行</div>
<div class="row-span-3">占 3 行 (整列)</div>
<div class="row-span-full">占满整列高度 (响应式友好)</div>
</div>混合跨度布局
本示例展示了一个 3 行 × 多列的网格（使用 grid-flow-col），其中某些元素跨越了多行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Row Span 演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center p-10 bg-gray-50">
<h1 class="text-green-600 text-5xl font-bold mb-8">
前端技术教程
</h1>
<p class="font-bold text-lg mb-6 text-gray-700">Tailwind CSS row-span 类应用</p>
<p class="mb-4 text-sm text-gray-500">
容器定义为 3 行，采用列优先填充。观察元素 4 (跨 2 行) 和元素 6 (跨 3 行) 的效果。
</p>
<!--
主容器：
- grid: 启用网格
- grid-rows-3: 显式定义 3 行 (关键！配合 grid-flow-col 使用)
- grid-flow-col: 内容先垂直填充，再换列
- auto-cols-fr: 列宽自动均分
-->
<div class="grid grid-rows-3 grid-flow-col auto-cols-fr gap-4 max-w-4xl mx-auto border p-4 bg-white shadow-lg rounded-lg h-96">
<!-- 第 1 列 -->
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold shadow-sm">1</div>
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold shadow-sm">2</div>
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold shadow-sm">3</div>
<!-- 第 2 列 -->
<!-- 元素 4: 跨越 2 行 -->
<div class="bg-green-500 text-white row-span-2 flex items-center justify-center rounded font-bold shadow-md">
4 (跨 2 行)
</div>
<!-- 元素 5: 自动填补剩余的第 3 行位置 -->
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold shadow-sm">5</div>
<!-- 第 3 列 -->
<!-- 元素 6: 跨越 3 行 (整列) -->
<div class="bg-green-600 text-white row-span-3 flex items-center justify-center rounded font-bold shadow-md">
6 (跨 3 行)
</div>
</div>
<div class="mt-8 text-left max-w-4xl mx-auto bg-white p-4 rounded shadow text-sm text-gray-600">
<h3 class="font-bold text-gray-800 mb-2">布局逻辑分析：</h3>
<ul class="list-disc pl-5 space-y-1">
<li>容器被强制分为 <strong>3 行</strong>。</li>
<li><strong>第 1 列</strong>：元素 1, 2, 3 依次填满 3 行。</li>
<li><strong>第 2 列</strong>：元素 4 设置 <code>row-span-2</code>，占据该列的第 1、2 行；元素 5 自动填入该列的第 3 行。</li>
<li><strong>第 3 列</strong>：元素 6 设置 <code>row-span-3</code>，独占整列高度。</li>
</ul>
</div>
</body>
</html>如果说 row-span 是控制元素的“高度”，那么 row-start 和 row-end 就是控制元素的“垂直坐标”。它们允许你指定元素从哪条水平线开始，或在哪个水平线结束。
row-start-n：元素从第 n 条水平线开始向下延伸。
row-end-n：元素在第 n 条水平线处结束。
组合使用：可以结合 row-span 使用，也可以单独指定 start 和 end 来精确控制位置，甚至制造“重叠”或“留白”效果。
自定义起始与结束位置
本示例在一个 4 行网格中，演示了如何强制元素从特定位置开始或结束。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Row Start/End 演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center p-10 bg-gray-50">
<h1 class="text-green-600 text-5xl font-bold mb-8">
前端技术教程
</h1>
<p class="font-bold text-lg mb-6 text-gray-700">Tailwind CSS row-start / row-end 类应用</p>
<p class="mb-4 text-sm text-gray-500">
容器为 4 行网格，列优先填充。观察元素如何通过定位类跳过或覆盖特定行区域。
</p>
<!--
主容器：
- grid-rows-4: 定义 4 行，意味着有 5 条水平网格线 (1-5)
- grid-flow-col: 列优先填充
-->
<div class="grid grid-rows-4 grid-flow-col auto-cols-fr gap-4 max-w-4xl mx-auto border p-4 bg-white shadow-lg rounded-lg h-[500px] relative">
<!-- 网格线标记 (仅用于视觉辅助) -->
<div class="absolute inset-0 pointer-events-none flex flex-col justify-between py-2 text-xs text-gray-400 font-mono z-0">
<span class="border-t border-dashed border-gray-300 w-full">Line 1 (Top)</span>
<span class="border-t border-dashed border-gray-300 w-full">Line 2</span>
<span class="border-t border-dashed border-gray-300 w-full">Line 3</span>
<span class="border-t border-dashed border-gray-300 w-full">Line 4</span>
<span class="border-t border-dashed border-gray-300 w-full">Line 5 (Bottom)</span>
</div>
<!-- 第 1 列 -->
<!-- 元素 1: 从第 2 条线开始，跨越 2 行 (占据第 2, 3 行) -->
<div class="bg-green-500 text-white row-start-2 row-span-2 flex items-center justify-center rounded font-bold shadow-md z-10">
1 (Start: 2, Span: 2)
</div>
<!-- 元素 2, 3: 自动填充剩余空间 -->
<!-- 由于元素 1 占据了中间，自动流可能会调整，具体取决于浏览器实现和空缺处理 -->
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold z-10">2</div>
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold z-10">3</div>
<!-- 第 2 列 -->
<!-- 元素 4: 从第 2 条线开始，到第 4 条线结束 (占据第 2, 3 行) -->
<!-- 注意：这里原文示例用了 col-end-4，但在行控制语境下，我们主要关注 row-start/end。
为了演示 row-end，我们假设它只控制行。如果同时控制列，需配合 col-start/end -->
<div class="bg-green-600 text-white row-start-2 row-end-4 flex items-center justify-center rounded font-bold shadow-md z-10">
4 (Start: 2, End: 4)
</div>
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold z-10">5</div>
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold z-10">6</div>
<div class="bg-green-300 text-green-900 flex items-center justify-center rounded font-bold z-10">7</div>
<!-- 第 3 列 -->
<!-- 元素 8: 从第 2 条线开始，跨越 3 行 (占据第 2, 3, 4 行) -->
<div class="bg-green-700 text-white row-start-2 row-span-3 flex items-center justify-center rounded font-bold shadow-md z-10">
8 (Start: 2, Span: 3)
</div>
</div>
<div class="mt-8 text-left max-w-4xl mx-auto bg-white p-4 rounded shadow text-sm text-gray-600">
<h3 class="font-bold text-gray-800 mb-2">关键知识点：</h3>
<ul class="list-disc pl-5 space-y-1">
<li><code>row-start-2</code>: 忽略第 1 行，强制从第 2 条水平线开始。</li>
<li><code>row-end-4</code>: 强制在第 4 条水平线前结束（即占用到第 3 行底部）。</li>
<li>网格线编号总是比行数多 1。</li>
<li>在 <code>grid-flow-col</code> 模式下，<code>row-start</code> 非常有用，因为它可以打破默认的紧密堆积，创造垂直方向的留白或错位。</li>
</ul>
</div>
</body>
</html>Span vs Position：
row-span-{n} 关注“高度”（占据多少行）。
row-start-{n} 和 row-end-{n} 关注“垂直坐标”（从哪开始，在哪结束）。
网格线编号：始终记住水平网格线数量 = 行数 + 1。对于 grid-rows-12，线号范围是 1 到 13。
row-span-full：快捷方式，等同于 row-start-1 row-end-13（在 12 行系统中），用于创建通栏高度的侧边栏或背景。
与 grid-flow-col 的配合：row-start 和 row-span 在列优先布局（grid-flow-col）中威力最大，常用于创建错落有致的杂志风格布局或复杂的仪表盘组件。
响应式支持：所有行控制类都支持响应式前缀（如 lg:row-span-2），允许在不同屏幕尺寸下动态调整元素的高度和位置。
在一个 grid-rows-4 的容器中，如果你想让一个元素从第 2 行开始，并一直延伸到容器的最底部（不管容器有多少行），你应该使用哪两个类的组合？
row-span-2 和 row-start-1 row-end-3 在视觉效果上是否相同？如果在响应式断点中，父容器的行数从 3 变为 6，这两个类的行为会有什么潜在的区别吗？
假设你有一个 grid-rows-12 的仪表盘布局，想要创建一个侧边栏占据顶部 3 行，主内容区域占据底部 9 行（在同一列中）。请使用 row-start 和 row-span ( 或 row-end) 写出这两个元素的类名配置方案。