Tailwind CSS - 网格模板行

使用 Tailwind CSS 定义网格行

CSS Grid 是一个强大的二维布局系统。grid-template-rows 属性是其基础组成部分，允许您显式定义网格容器中行的数量和高度。Tailwind CSS 提供了一套全面的工具类来轻松控制此属性。

网格模板行类名

您可以创建一个具有特定数量等宽行的网格，禁用显式行定义，或者创建一个继承其父网格行轨道的子网格。

类名	CSS 属性
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-12	grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;
grid-rows-subgrid	grid-template-rows: subgrid;
grid-rows-[auto_1fr_auto]	grid-template-rows: auto 1fr auto; (Arbitrary value)

示例 1：简单行布局

使用 grid-rows-{n} 工具类创建具有特定数量等高行的网格。这对于简单、统一的布局非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Rows Example</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8">
  <h2 class="text-xl font-bold mb-4">3-Row Grid with 2 Columns</h2>
  <div class="grid grid-rows-3 grid-cols-2 gap-4 h-48">
    <div class="bg-sky-500 rounded-lg flex items-center justify-center text-white font-bold">1</div>
    <div class="bg-sky-500 rounded-lg flex items-center justify-center text-white font-bold">2</div>
    <div class="bg-pink-500 rounded-lg flex items-center justify-center text-white font-bold">3</div>
    <div class="bg-pink-500 rounded-lg flex items-center justify-center text-white font-bold">4</div>
    <div class="bg-amber-500 rounded-lg flex items-center justify-center text-white font-bold">5</div>
    <div class="bg-amber-500 rounded-lg flex items-center justify-center text-white font-bold">6</div>
  </div>
</body>
</html>

示例 2：创建粘性页脚布局

显式行的一个非常实用的用例是创建粘性页脚。通过使用 grid-rows-[auto_1fr_auto]，我们定义了一个三行网格：一个占用其内容高度的头部，一个占用所有剩余可用空间 (1fr) 的主内容区域，以及一个占用其内容高度的页脚。这确保页脚会固定在视口底部，即使页面内容很少。

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Footer Layout</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="grid grid-rows-[auto_1fr_auto] min-h-screen bg-slate-200 text-slate-800">
  <header class="bg-white shadow p-4">
    <p class="font-bold">My Website</p>
  </header>

  <main class="p-8">
    <h1 class="text-2xl font-bold">Page Content</h1>
    <p>This is the main content area. It will expand to fill the available space.</p>
  </main>

  <footer class="bg-slate-800 text-white p-4 text-center">
    <p>&copy; 2024 My Company</p>
  </footer>
</body>
</html>

使用子网格 (Subgrid) 实现对齐的嵌套网格

在网格项上使用 grid-rows-subgrid 使其采用其父网格的行轨道。这对于创建需要嵌套元素与主网格结构完美对齐的复杂布局非常强大。注意： subgrid 是一个现代 CSS 特性，可能并非所有浏览器都支持。请查看 caniuse.com 获取当前支持情况。

最佳实践与专业技巧

• 隐式行与显式行： 当您拥有的网格项多于显式定义的行时，网格将创建隐式行。您可以使用 auto-rows-* 工具类（例如 auto-rows-fr）来控制它们的行高。
• 与列结合使用： grid-rows-* 与 grid-cols-* 协同工作以定义完整的网格结构。
• 使用浏览器开发者工具： 理解和调试 CSS Grid 布局的最佳方法是使用浏览器的开发者工具。它们提供了一个可视化叠加层，显示网格线、间距和轨道，让您轻松查看布局是如何构建的。