当使用 grid-cols-12 配合较大横向间距（如 gap-x-7 或更大）时，Tailwind 的 gap 计算会导致子项总宽度超出父容器——根本原因在于 gap 会作用于所有列轨道（包括未显式占用的虚拟列），从而引发负向列宽计算。解决方法是减少列数以匹配实际布局需求。
当使用 `grid-cols-12` 配合较大横向间距（如 `gap-x-7` 或更大）时，tailwind 的 gap 计算会导致子项总宽度超出父容器——根本原因在于 gap 会作用于所有列轨道（包括未显式占用的虚拟列），从而引发负向列宽计算。解决方法是减少列数以匹配实际布局需求。
在 Tailwind 中，gap-x 并非仅作用于“有内容的列之间”，而是严格按 CSS Grid 规范，在每对相邻列轨道（column tracks）之间插入间隙。当你声明 grid-cols-12，Grid 容器会创建 12 条等宽的列轨道（即 11 个内部列间隙），即使你只用 col-span-6 占据其中一半——剩余的 6 列轨道依然存在，且 gap-x-8 会在全部 11 个列间隙处生效。
以你的示例为例（父容器宽 300px）：
-
grid-cols-12→ 每列基础宽度 =300px / 12 = 25px -
gap-x-8→ 对应2rem = 32px（默认 Tailwind 配置） - 总间隙宽度 =
11 × 32px = 352px - 可用内容宽度 =
300px − 352px = −52px→ 列宽被迫为负值，触发浏览器回退行为，导致整体溢出
✅ 正确解法：让列轨道数量与实际布局语义对齐。既然你只需左右两栏均分，就应使用 grid-cols-2：
<div style="width: 300px" class="bg-red-400">
<div class="grid grid-cols-2 gap-x-8">
<div class="col-span-1 bg-blue-500">A</div>
<div class="col-span-1 bg-green-500">B</div>
</div>
<div class="bg-yellow-500">It should be only this wide</div>
</div>
此时：
- 列轨道数 = 2 → 仅 1 个列间隙
- 总间隙 =
1 × 32px = 32px - 每列可用宽度 =
(300px − 32px) / 2 = 134px→ 完全合理
⚠️ 注意事项：
- 不要依赖
col-span-*“强行撑满”过多列轨道，而应优先精简grid-cols-*数量； - 若需响应式多列（如
md:grid-cols-4），确保各断点下的列数与gap值协同设计； - 可通过浏览器开发者工具的 Layout 面板查看 Grid 轨道和 gap 实际渲染位置，验证列分布。
总结：Tailwind 的 gap 是 Grid 级别属性，其行为由轨道数量决定，而非子元素数量。语义化定义列结构（grid-cols-n）比盲目增加列数再靠 col-span 合并更健壮、更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
