gap-x 控制 Grid 或 Flex 容器中相邻子元素间的水平间距，不改变列宽、不作用于首尾外侧；需确保父容器有 grid/flex 类且子元素为直系节点。
gap-x 在多列布局中到底控制什么
gap-x 只作用于容器内子元素之间的水平间距，前提是容器启用了 Grid 或 Flex 布局（且子元素为同级直系子项）。它不会影响第一列左边或最后一列右边的空白，也不会改变列宽本身。如果你用的是 grid-cols-3 但没看到间距变化，大概率是忘了给父容器加 grid 类。
常见错误现象：gap-x-4 加了却没效果，检查两点：
- 父容器是否同时有 grid（或 flex + flex-row）
- 子元素是否都是直接子节点（中间没嵌套 div 或 section 隔开）
gap-x 和 grid-column-gap 的关系
gap-x 是 Tailwind 对 CSS column-gap 的封装，两者在 Grid 布局中完全等价；但在 Flex 布局中，gap-x 实际映射的是 gap 的横向部分（即 gap: 0 1rem），而原生 column-gap 在 Flex 中不生效。
使用场景差异：
- Grid 布局下，gap-x 和 grid-column-gap 效果一致，推荐统一用 gap-x
- Flex 布局下，必须用 gap-x，grid-column-gap 会被忽略
- 若需响应式列间距，直接用 sm:gap-x-2 md:gap-x-6，比写媒体查询简单得多
和 padding/margin 混用时的典型冲突
gap-x 是布局层间距，和 px、mx 不叠加，但会“掩盖”它们的视觉效果。比如给子项加 mx-2，又加 gap-x-8，最终水平间距以 gap-x-8 为准，mx-2 的外边距会被忽略（Flex/Grid 的 gap 优先级更高）。
容易踩的坑：
- 在 Grid 容器里对子项单独设 mr-4，期望扩大列间距离 → 实际无效，应改用 gap-x-4
- 同时用 gap-x-4 和 px-4，误以为总间距是 8，其实 px-4 是子项自身内边距，不影响列与列之间距离
- 在响应式断点中漏掉 gap-x，例如只写了 md:grid-cols-3 却没配 md:gap-x-6，导致中屏列挤在一起
gap-x 在不同列数下的实际表现
gap-x 的数值是“每一对相邻列之间”的间距，不是所有列的总间隙。3 列布局用 gap-x-6，实际产生 2 处 1.5rem 间距（Tailwind 的 6 对应 1.5rem），不是 3 × 1.5rem。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
参数差异示例：
- gap-x-0 → 移除默认列间距（某些组件库自带 gap，需显式清空）
- gap-x-px → 1px 间隔，适合需要极细分隔线的卡片栅格
- gap-x-10 → 2.5rem，适合大间距仪表盘布局
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-8"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div>
注意 gap-y 和 gap-x 可以独立设置，但一旦用了 gap（如 gap-4），就会同时覆盖横纵方向，无法再用 gap-x 覆盖其中一项——这是很多人调了半天没生效的原因。
列间距这事看着简单，但真正卡住人的，往往是容器没设对 display 类型，或者响应式断点里漏掉了 gap 工具类。别急着查文档，先 inspect 元素看 computed 样式里 column-gap 有没有被正确应用。
