理解 CSS grid-template-rows 属性在定义网格行结构中的核心作用
掌握 Tailwind CSS 中 grid-rows-{n} 工具类的用法，快速定义网格的行数与高度分布
学会结合 grid-flow-col 实现“按列填充”的特殊布局模式（先填满列，再换列）
能够区分 grid-cols（控制列宽）与 grid-rows（控制行高）在不同布局场景下的应用差异
在 CSS Grid 布局中，grid-template-rows 属性用于显式定义网格容器中行的数量以及每一行的高度。
虽然在实际开发中，大多数网格布局是“隐式行”的（即行数由内容自动决定，只定义列数），但在某些特定场景下，我们需要严格控制行数。例如：
固定行数的仪表盘：确保布局始终为 3 行，无论内容多少。
横向滚动布局：配合 grid-flow-col，让内容先垂直填满指定行数，再向右开启新列。
Tailwind CSS 提供了 grid-rows-{n} 系列工具类，将复杂的 CSS 语法简化为直观的类名，默认行为是将可用高度平均分配给指定的行数。
工作原理
激活网格：父容器必须添加 grid 类。
定义行数：添加 grid-rows-{n}，Tailwind 会生成类似 grid-template-rows: repeat(n, minmax(0, 1fr)) 的样式。
填充模式：
默认 (Row Flow)：子元素从左到右填充，填满一行后换到下一行。此时 grid-rows 主要限制总行数，多余内容会创建隐式行（除非配合其他属性）。
列优先 (Column Flow)：当配合 grid-flow-col 使用时，grid-rows 变得至关重要。它定义了每列有多少行，内容会先从上到下填满这 N 行，然后再移动到下一列。
Tailwind 提供了一套从 1 到 6 的预定义行数类，以及特殊控制类。
技术细节：
minmax(0, 1fr)确保行可以收缩到比内容更小，防止网格溢出。这与标准的1fr略有不同，提供了更好的弹性。
这是 grid-rows 最经典的使用场景。当我们希望内容像报纸排版一样，先垂直填满指定行数，再向右换列时，必须同时使用 grid-rows-{n} 和 grid-flow-col。
假设我们有一个容器，希望它始终只有 3 行。
如果有 6 个项目，它们应该排成 2 列 × 3 行。
如果有 9 个项目，它们应该排成 3 列 × 3 行。
3 行 × 多列布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Grid Rows 演示</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 grid-rows-3 + grid-flow-col 应用</p>
<p class="mb-4 text-sm text-gray-500">
容器被限制为 3 行。内容先垂直填充（1-2-3），然后换到下一列（4-5-6）。
</p>
<!--
主容器配置：
1. grid: 启用 Grid 布局
2. grid-rows-3: 强制定义只有 3 行，每行等高
3. grid-flow-col: 改变填充方向，先列后行 (Column First)
4. auto-cols-fr: (可选) 让列自动均分剩余宽度
-->
<div class="grid grid-rows-3 grid-flow-col auto-cols-fr gap-4 max-w-3xl mx-auto border p-4 bg-white shadow-lg rounded-lg h-64">
<!-- 第 1 列 (自动形成) -->
<div class="bg-green-500 text-white flex items-center justify-center rounded font-bold shadow-md">1</div>
<div class="bg-green-500 text-white flex items-center justify-center rounded font-bold shadow-md">2</div>
<div class="bg-green-500 text-white flex items-center justify-center rounded font-bold shadow-md">3</div>
<!-- 第 2 列 (自动形成) -->
<div class="bg-green-600 text-white flex items-center justify-center rounded font-bold shadow-md">4</div>
<div class="bg-green-600 text-white flex items-center justify-center rounded font-bold shadow-md">5</div>
<div class="bg-green-600 text-white flex items-center justify-center rounded font-bold shadow-md">6</div>
</div>
<div class="mt-8 text-left max-w-3xl 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>grid-rows-3</code>: 锁定了网格的高度结构，强制分为 3 等份。</li>
<li><code>grid-flow-col</code>: 指示浏览器不要按行填充，而是按列填充。</li>
<li>结果：元素 1, 2, 3 占据第一列；元素 4, 5, 6 占据第二列。</li>
<li>如果不加 <code>grid-rows-3</code>，<code>grid-flow-col</code> 可能会导致所有元素排成一长列（取决于容器高度）。</li>
</ul>
</div>
</body>
</html>除了列优先布局，grid-rows 也可用于标准流中，强制将容器高度平均分配给指定数量的行。这在创建高度一致的卡片列表或仪表盘行时非常有用。
2 行固定布局
在此示例中，我们定义了一个 2 行的网格。即使内容量不同，两行的高度也会强制相等（各占 50%）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Grid Rows 标准布局</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 grid-rows-2 应用</p>
<p class="mb-4 text-sm text-gray-500">
容器强制分为 2 行。注意：这里没有使用 grid-flow-col，所以是标准的从左到右填充。
</p>
<!--
主容器：
- grid-rows-2: 强制分为 2 行，每行高度为 50% (1fr)
- grid-flow-row (默认): 正常从左到右，从上到下
-->
<div class="grid grid-rows-2 grid-cols-3 gap-4 max-w-3xl mx-auto border p-4 bg-white shadow-lg rounded-lg h-64">
<!-- 第一行 (3 个元素) -->
<div class="bg-green-500 text-white flex items-center justify-center rounded font-bold">1</div>
<div class="bg-green-500 text-white flex items-center justify-center rounded font-bold">2</div>
<div class="bg-green-500 text-white flex items-center justify-center rounded font-bold">3</div>
<!-- 第二行 (3 个元素) -->
<div class="bg-green-700 text-white flex items-center justify-center rounded font-bold">4</div>
<div class="bg-green-700 text-white flex items-center justify-center justified-center rounded font-bold">5</div>
<div class="bg-green-700 text-white flex items-center justify-center rounded font-bold">6</div>
</div>
<div class="mt-8 text-left max-w-3xl mx-auto bg-white p-4 rounded shadow text-sm text-gray-600">
<h3 class="font-bold text-gray-800 mb-2">关键点：</h3>
<p>在这个例子中，<code>grid-rows-2</code> 确保了上下两行的高度严格相等，各占容器高度的 50%。如果没有这个类，行高将由内容撑开。</p>
</div>
</body>
</html>显式行 (grid-rows-n)：你明确告诉浏览器“我要 N 行”，浏览器会尝试将内容塞进这 N 行中（如果配合 grid-flow-col）或平分高度。
隐式行：如果你只设置了 grid-cols-3 而没有设置 grid-rows，当你放入第 4 个、第 5 个元素时，CSS Grid 会自动创建新的行来容纳它们。这些新行的高度默认由 grid-auto-rows 控制（Tailwind 中对应 auto-rows-{size}）。
你可以针对不同屏幕尺寸改变行数策略。
<!-- 移动端：单列长滚动 (1 行或自动) -->
<!-- 桌面端：3 行 × 多列布局 -->
<div class="grid grid-rows-1 md:grid-rows-3 grid-flow-col md:grid-flow-col auto-cols-fr">
<!-- 内容 -->
</div>grid-rows-none如果你在某个断点下想取消之前定义的固定行数，恢复为内容自适应高度，可以使用 lg:grid-rows-none。这将把 grid-template-rows 重置为 none。
核心用途：grid-rows-{n} 用于显式定义网格的行数和行高比例。
最佳搭档：它与 grid-flow-col 是黄金组合，用于实现“报纸式”的多列垂直填充布局。
高度分配：默认情况下，它会将容器高度平均分配给指定的行数 (1fr)。
与 grid-cols 的区别：grid-cols 控制水平分割（列数），grid-rows 控制垂直分割（行数）。在响应式设计中，通常用 grid-cols 做主流布局，用 grid-rows 做特殊布局优化。
数值范围：Tailwind 默认提供 1 到 6 的预设，更多需求可通过任意值语法 grid-rows-[10] 实现。
如果你想创建一个“瀑布流”效果的简化版（先填满第一列，再填第二列），且每列固定显示 4 个项目，你应该使用哪些 Tailwind 类组合？
在一个 grid-rows-3 的容器中，如果放入了 10 个子元素且没有设置 grid-flow-col，会发生什么情况？多出来的元素会如何排列？
grid-rows-2 和 h-1/2 应用在子元素上有什么本质区别？为什么在网格布局中推荐使用 grid-rows 而不是给每个子元素写高度？