Tailwind CSS - 网格模板列

Tailwind CSS：网格模板列

CSS Grid 是一个强大的二维布局系统，Tailwind 的 grid-template-columns 工具类使得定义网格结构变得异常直观。这些工具类，主要是 grid-cols-*，允许您指定网格布局中的列数以及它们的尺寸。

核心网格列工具类

类名	CSS 属性	描述
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));	创建单列网格。
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));	创建两列等宽网格。
…	…	可用至 `grid-cols-12`。
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));	创建十二列网格，这是网页设计中的标准。
grid-cols-none	grid-template-columns: none;	移除显式网格列定义。
grid-cols-subgrid	grid-template-columns: subgrid;	允许嵌套网格与其父网格的列轨道对齐。

实际应用：构建响应式产品卡片网格

grid-cols-* 最常见的用途是创建适应不同屏幕尺寸的响应式布局。让我们构建一个产品画廊，在移动设备上显示一列，在平板电脑上显示两列，在桌面设备上显示四列。

项目设置

遵循“最大宽度”章节中描述的现代项目设置（使用 npm、tailwind.config.js 等）。这确保您的 sm: 和 md: 等响应式前缀能正常工作。

示例：响应式产品网格

关键是在容器元素上将 grid 类与响应式 grid-cols-* 和 gap-* 工具类结合使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Demo</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-50">

    <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
        <h1 class="text-3xl font-bold text-slate-900 mb-6">Featured Products</h1>

        <!-- 响应式网格容器 -->
        <div class="grid
            grid-cols-1
            sm:grid-cols-2
            lg:grid-cols-4
            gap-6">

            <!-- 网格项 1 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="h-48 bg-gray-200"></div> <!-- 图片占位符 -->
                <div class="p-4">
                    <h3 class="font-semibold text-lg">Product Name</h3>
                    <p class="text-gray-600 mt-1">$19.99</p>
                </div>
            </div>

            <!-- 网格项 2 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="h-48 bg-gray-200"></div>
                <div class="p-4">
                    <h3 class="font-semibold text-lg">Another Item</h3>
                    <p class="text-gray-600 mt-1">$24.99</p>
                </div>
            </div>

            <!-- 再添加 6 个项目以查看网格换行效果 -->
            <!-- ... -->

        </div>
    </div>

</body>
</html>

解释

grid：将元素设置为网格容器。
grid-cols-1：这是移动优先的默认设置。在小屏幕上，项目将堆叠为单列。
sm:grid-cols-2：在 sm 断点（640px）及以上，布局切换为两列网格。
lg:grid-cols-4：在 lg 断点（1024px）及以上，它变为四列网格。
gap-6：此工具类在所有网格项之间添加一致的间距，包括水平和垂直方向。

高级技巧：子网格 (Subgrid)

subgrid 是一个较新的 CSS 特性，它允许嵌套网格与其直接父网格的轨道对齐。这对于创建需要嵌套组件之间严格对齐的复杂布局非常有用。

示例：嵌套内容与父网格对齐

<!-- 父网格 -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>

  <!-- 此项跨越 3 列并包含一个嵌套的子网格 -->
  <div class="col-span-3 grid grid-cols-subgrid gap-4">
    <!-- 此项是子网格的一部分。通过使用 col-start-2， -->
    <!-- 它与原始父网格的第三列对齐 -->
    <div class="col-start-2 bg-blue-200 p-2 rounded">
      06 (Aligned with parent's 3rd column)
    </div>
  </div>

  <div>03</div>
  <div>04</div>
</div>

浏览器支持说明

截至 2023 年底，subgrid 已在所有主要的现代浏览器（Firefox、Chrome、Edge、Safari）中得到支持。但是，如果您需要支持较旧的浏览器版本，请务必查看 caniuse.com 以获取最新的兼容性数据。

调试技巧

网格未生效？ 确保父元素具有 grid 类。没有它，grid-cols-* 不会生效。
使用浏览器开发者工具： 现代浏览器的开发者工具中有一个“网格”检查器。使用它来可视化您的网格线、间距和轨道。它是调试复杂网格布局的宝贵工具。