grid-cols-3需配合grid类才能生效，正确写法为class="grid grid-cols-3"；它将子元素均分为三列等宽布局，并支持响应式断点与自定义列宽控制。
直接在 HTML 元素上添加 grid-cols-3 类，就能快速创建等宽三列网格布局，前提是该元素已设为 Grid 容器（即已应用 grid 或 grid-flow-col 等相关类）。
确保父容器是 Grid 布局
Tailwind 的 grid-cols-3 本身只定义列数，不自动启用 Grid；必须配合 grid 类才能生效：
- ✅ 正确写法：
class="grid grid-cols-3" - ❌ 错误写法：
class="grid-cols-3"（缺少 grid，无效）
基础三列等宽示例
默认情况下，grid-cols-3 将子元素平均分为三列，每列等宽（flexible，基于 grid-template-columns: repeat(3, minmax(0, 1fr))）：
<div class="grid grid-cols-3 gap-4"> <div>第1项</div> <div>第2项</div> <div>第3项</div> <div>第4项</div> <div>第5项</div> <div>第6项</div> </div>
6 个子项会自动排列为 2 行 × 3 列，gap-4 控制列与行间距。
立即学习“前端免费学习笔记（深入）”；
配合响应式断点使用
可按屏幕尺寸切换列数，例如移动端单列、平板双列、桌面三列：
-
grid-cols-1 md:grid-cols-2 lg:grid-cols-3：小屏 1 列 → 中屏 2 列 → 大屏 3 列 - 所有断点类（如 sm、md、lg）都支持 grid-cols-*
自定义列宽或内容对齐
grid-cols-3 是快捷方式，若需更精细控制，可组合其他类：
- 用 justify-items-center 居中对齐所有子项内容
- 用 text-center 或 flex justify-center 居中单个子项内的文字/元素
- 想让某列占满（如侧边栏+主内容），改用 grid-cols-[1fr_2fr] 或 grid-cols-2 + col-span-2
