Tailwind CSS - 网格行起始/结束

精通 Tailwind CSS 中的网格行

在 CSS Grid 布局中，沿行定位元素是一个基本概念。Tailwind CSS 提供了一套全面的工具类，用于控制元素如何跨越网格行以及其起始和结束位置。这些工具类对于创建复杂、响应式且组织良好的布局至关重要。

控制行跨越和位置

使用 row-span-*、row-start-* 和 row-end-* 工具类来管理网格项的垂直放置和尺寸。以下是 Tailwind CSS v3+ 中可用的核心类列表。

类名	CSS 属性
row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-2	grid-row: span 2 / span 2;
row-span-3	grid-row: span 3 / span 3;
row-span-4	grid-row: span 4 / span 4;
row-span-5	grid-row: span 5 / span 5;
row-span-6	grid-row: span 6 / span 6;
row-span-7	grid-row: span 7 / span 7;
row-span-8	grid-row: span 8 / span 8;
row-span-9	grid-row: span 9 / span 9;
row-span-10	grid-row: span 10 / span 10;
row-span-11	grid-row: span 11 / span 11;
row-span-12	grid-row: span 12 / span 12;
row-span-full	grid-row: 1 / -1;
row-start-1	grid-row-start: 1;
row-start-2	grid-row-start: 2;
row-start-3	grid-row-start: 3;
row-start-4	grid-row-start: 4;
row-start-5	grid-row-start: 5;
row-start-6	grid-row-start: 6;
row-start-7	grid-row-start: 7;
row-start-8	grid-row-start: 8;
row-start-9	grid-row-start: 9;
row-start-10	grid-row-start: 10;
row-start-11	grid-row-start: 11;
row-start-12	grid-row-start: 12;
row-start-13	grid-row-start: 13;
row-start-auto	grid-row-start: auto;
row-end-1	grid-row-end: 1;
row-end-2	grid-row-end: 2;
row-end-3	grid-row-end: 3;
row-end-4	grid-row-end: 4;
row-end-5	grid-row-end: 5;
row-end-6	grid-row-end: 6;
row-end-7	grid-row-end: 7;
row-end-8	grid-row-end: 8;
row-end-9	grid-row-end: 9;
row-end-10	grid-row-end: 10;
row-end-11	grid-row-end: 11;
row-end-12	grid-row-end: 12;
row-end-13	grid-row-end: 13;
row-end-auto	grid-row-end: auto;

核心概念：网格行工作原理

• 跨越行 (row-span-*)：这是最常用的工具类。它使元素占据特定数量的网格行。可以将其想象为电子表格中的合并单元格。row-span-3 意味着该项将占据三行的空间。
• 完全跨越 (row-span-full)：一个强大的快捷方式，使元素跨越网格中所有可用的行。这非常适合特定网格上下文中的侧边栏或背景元素。
• 显式定位 (row-start-* / row-end-*)：这些工具类通过定义元素的精确起始和结束网格线来提供精确控制。带有 row-start-2 的元素将从第二条水平网格线开始。结合 row-start-2 和 row-end-5 使元素从第 2 行到第 5 行（覆盖 3 行）跨越。
• 响应式控制：所有这些工具类都可以通过添加 md: 或 lg: 等前缀来实现响应式。例如，row-span-1 md:row-span-2 将使元素在小屏幕上跨越一行，在中等屏幕及以上跨越两行。

现代开发工作流

虽然下面的示例为了简单起见使用了 Tailwind Play CDN，但现代项目应使用像 Vite 或 Next.js 这样的工具链配合 Node.js 构建。这可以启用强大的功能，例如 JIT（即时）编译器，它会扫描您的文件并只生成您实际使用的 CSS，从而生成微小的生产文件。

使用 Vite 快速设置：

# 1. 创建一个新的 Vite 项目
npm create vite@latest my-tailwind-project -- --template react
cd my-tailwind-project

# 2. 安装 Tailwind CSS 依赖
npm install -D tailwindcss postcss autoprefixer

# 3. 初始化 Tailwind CSS
npx tailwindcss init -p

# 4. 在 tailwind.config.js 中配置模板路径
# 这告诉 Tailwind 在哪里查找类名
# content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]

# 5. 将 Tailwind 指令添加到您的主 CSS 文件
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 6. 运行开发服务器
npm run dev

实战示例

示例 1：仪表盘小部件布局

此示例演示了 row-span-* 如何创建类似仪表盘的布局，其中一个小部件的高度是其他小部件的两倍。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Dashboard Widget Layout</title>
</head>
<body class="bg-slate-100 p-8">
  <h2 class="text-2xl font-bold text-slate-800 mb-4">Team Dashboard</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 grid-rows-2 gap-6">
    <!-- 此项跨越两行 -->
    <div class="md:row-span-2 bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold text-slate-900">Active Projects</h3>
      <p class="text-slate-500 mt-2 text-sm">This card is taller and spans two rows on medium screens and up.</p>
    </div>
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold text-slate-900">Revenue (30d)</h3>
      <p class="text-slate-500 mt-2 text-3xl font-bold">$15,230</p>
    </div>
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold text-slate-900">New Users</h3>
       <p class="text-slate-500 mt-2 text-3xl font-bold">128</p>
    </div>
    <div class="col-span-1 md:col-span-2 bg-white rounded-xl shadow-lg p-6">
        <h3 class="font-semibold text-slate-900">Recent Activity</h3>
        <p class="text-slate-500 mt-2 text-sm">This item fills the remaining space.</p>
    </div>
  </div>
</body>
</html>

示例 2：使用显式定位的每周日程表

在这里，我们使用 row-start-* 和 col-start-* 来精确地将事件放置在日历网格上。请注意“Team Workshop”是如何跨越多行放置的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Weekly Schedule</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="grid grid-cols-6 grid-rows-7 gap-1 bg-gray-200 p-1 rounded-lg">
    <!-- 6 列（时间 + 5 个工作日）和 7 行（上午 9 点到下午 3 点）的网格 -->
    <!-- 头部 -->
    <div class="col-start-2 font-semibold text-center py-2">Mon</div>
    <div class="font-semibold text-center py-2">Tue</div>
    <div class="font-semibold text-center py-2">Wed</div>
    <div class="font-semibold text-center py-2">Thu</div>
    <div class="font-semibold text-center py-2">Fri</div>

    <!-- 事件 1 -->
    <div class="col-start-2 row-start-2 row-span-2 bg-sky-500 text-white p-2 rounded-md text-xs">
      <strong>Project Kick-off</strong><br>10:00 AM - 12:00 PM
    </div>

    <!-- 事件 2：显式起始和结束 -->
    <div class="col-start-4 row-start-3 row-end-6 bg-amber-500 text-white p-2 rounded-md text-xs">
      <strong>Team Workshop</strong><br>11:00 AM - 2:00 PM
    </div>

    <!-- 事件 3 -->
    <div class="col-start-6 row-start-5 bg-indigo-500 text-white p-2 rounded-md text-xs">
      <strong>Design Review</strong><br>1:00 PM - 2:00 PM
    </div>
  </div>
</body>
</html>