理解 CSS grid-template-columns 属性在网格布局中的核心作用
掌握 Tailwind CSS 中 grid-cols-{n} 系列工具类的用法，快速定义网格列数
学会使用 grid-cols-none 禁用网格列布局，恢复默认流式布局
能够结合 gap 等属性构建响应式的多列网格系统
在 CSS Grid 布局中，grid-template-columns 属性用于定义网格容器中列的数量以及每一列的宽度。它是构建二维布局（行和列）的基石。
Tailwind CSS 将这一属性封装为一系列实用的工具类 grid-cols-{n}，其中 {n} 代表列的数量。这使得开发者无需记忆复杂的 repeat() 函数语法，即可通过简单的类名快速搭建出 1 到 12 列的网格系统。
工作原理
激活网格：首先需要在父容器上添加 grid 类，以启用 CSS Grid 布局模式（对应 display: grid）。
定义列数：接着添加 grid-cols-{n} 类，Tailwind 会自动生成类似 grid-template-columns: repeat(n, minmax(0, 1fr)) 的 CSS 规则。这意味着所有列将平均分配可用空间。
自动换行：子元素会自动按照定义的列数排列，超出部分自动换行至下一行。
Tailwind 提供了一套从 1 到 12 的预定义列数类，覆盖了绝大多数常见的布局需求。
注意：
minmax(0, 1fr)是 Tailwind 的默认行为，它确保列可以收缩到比内容更小（如果必要），防止网格溢出容器。这与标准的1fr略有不同，后者通常有最小内容宽度的限制。
grid-cols-none
当你需要在某些断点下临时取消网格布局，让元素恢复为块级堆叠显示时，可以使用 grid-cols-none。这通常与响应式前缀配合使用，例如 md:grid-cols-3 lg:grid-cols-none。
本示例演示了如何创建一个包含 6 个项目的三列网格布局。
我们需要展示一组数据卡片，要求在桌面端每行显示 3 个，自动换行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Grid Cols 演示</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-cols-3 类应用</p>
<p class="mb-4 text-sm text-gray-500">
下方容器被定义为 3 列网格，6 个子元素自动排列为两行。
</p>
<!--
主容器配置：
1. grid: 启用 Grid 布局
2. grid-cols-3: 定义 3 列，每列等宽
3. gap-1: 设置行列间距为 0.25rem (4px)
4. justify-evenly: (可选) 调整列间对齐方式，但在 grid-cols 中通常由 fr 单位控制
-->
<div class="grid grid-cols-3 gap-4 max-w-3xl mx-auto border p-4 bg-white shadow-lg rounded-lg">
<!-- 第 1 行 -->
<div class="bg-green-700 text-white h-12 flex items-center justify-center rounded font-bold">
1
</div>
<div class="bg-green-500 text-white h-12 flex items-center justify-center rounded font-bold">
2
</div>
<div class="bg-green-300 text-green-900 h-12 flex items-center justify-center rounded font-bold">
3
</div>
<!-- 第 2 行 (自动换行) -->
<div class="bg-green-700 text-white h-12 flex items-center justify-center rounded font-bold">
4
</div>
<div class="bg-green-500 text-white h-12 flex items-center justify-center rounded font-bold">
5
</div>
<div class="bg-green-300 text-green-900 h-12 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>
<ul class="list-disc pl-5 space-y-1">
<li><code>grid</code>: 激活 Flexbox 之外的 Grid 布局模式。</li>
<li><code>grid-cols-3</code>: 核心类，将容器划分为 3 个等宽列。</li>
<li><code>gap-4</code>: 在网格项之间创建间距，避免内容紧贴。</li>
<li>子元素无需设置宽度，它们会自动填充网格轨道。</li>
</ul>
</div>
</body>
</html>Tailwind 的强大之处在于其响应式前缀。你可以轻松实现在不同屏幕尺寸下切换列数的效果。
移动端单列，桌面端多列：这是最常见的设计模式。
<!-- 默认 (移动): 1 列 -->
<!-- md (平板): 2 列 -->
<!-- lg (桌面): 4 列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- 内容项 -->
</div>动态隐藏列：在大屏幕上恢复为普通流式布局。
<!-- 中等屏幕为 3 列，大屏幕取消网格限制 -->
<div class="grid grid-cols-3 lg:grid-cols-none">
<!-- 内容项 -->
</div>虽然 grid-cols-{n} 提供了等分列，但如果你需要非等分列（例如左侧固定宽，右侧自适应），可以使用任意值语法或自定义配置：
<!-- 使用任意值语法: 第一列 200px, 第二列自动填充 -->
<div class="grid grid-cols-[200px_1fr] gap-4">
<div>侧边栏</div>
<div>主要内容</div>
</div>核心功能：grid-cols-{n} 用于快速定义网格容器的列数，默认为等宽分布 (1fr)。
前置条件：必须先在父元素上添加 grid 类才能生效。
范围支持：原生支持 1 到 12 的整数列，以及 none 用于禁用。
响应式首选：结合 sm:, md:, lg: 等前缀是实现“移动端优先”多列布局的最佳实践。
间距控制：通常与 gap-{size} 类配合使用，以获得美观的网格间距。
如果你需要一个布局，在手机上显示 1 列，平板上显示 2 列，桌面上显示 4 列，你应该如何编写 HTML 类名？
grid-cols-3 和 flex flex-wrap 配合 w-1/3 有什么本质区别？在什么场景下你会优先选择 Grid 而不是 Flex？
当子元素的内容宽度超过了 grid-cols-n 定义的列宽时，Tailwind 默认的 minmax(0, 1fr) 行为会导致什么结果？这与标准的 CSS 1fr 有何不同？