gap不参与分列宽，只在列间插入固定空隙；真正决定列宽的是grid-template-columns或flex-basis等属性，如1fr 1fr在扣除gap后均分剩余宽度。
gap在grid和flex中怎么分列宽？
gap本身不参与“分列宽”，它只负责列与列之间的空隙。真正决定每列宽度的是grid-template-columns或flex-basis/flex。比如grid-template-columns: 1fr 1fr让两列均分容器剩余宽度（扣除gap后），而gap: 16px只是在这两列之间插入一个固定 16px 的空白轨道。
常见误解是以为gap: 16px会让每列变窄 16px——其实不是：两列总宽 = 容器内宽 − 16px，再均分；三列就是减去两个 16px 间隙，即 −32px。
-
grid-template-columns: repeat(4, 1fr)+gap: 12px→ 实际分配宽度时，先扣掉 3 × 12px = 36px，再四等分 - 用
fr单位时，gap值必须是确定长度（如px、rem），不能是1fr或calc()嵌套 - 如果列数动态（比如由 JS 渲染的列表），别硬写
repeat(n, 1fr)，改用grid-auto-fit+minmax()更稳妥
只想要列间距、不要行间距怎么办？
用双值gap语法：gap: 0 8px。第一个值是row-gap（行间距），第二个是column-gap（列间距）。顺序不能反，否则视觉错位。
这个写法在横向滚动导航栏、卡片横向流、单行工具栏里特别实用——垂直方向紧贴，水平方向留呼吸感。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
gap: 8px 0→ 实际是行距 8px、列距 0，和预期相反 - 旧版 Safari（≤14.0）不支持双值
gap，需降级为row-gap: 0; column-gap: 8px - 若同时写了
gap: 10px和column-gap: 8px，后者会覆盖列间距，但行间距仍为 10px，容易漏看
为什么gap: 12px后列宽没按预期均分？
大概率是没设对父容器的布局模式，或者子元素“不听话”。gap只在display: grid或display: flex容器下生效，其他任何 display 值（包括block、inline-block、table）都会让gap静默失效。
另外，表格元素（<table>、<code><tr>）天生不支持<code>gap，想控制列间距得用border-spacing（配合border-collapse: separate）或直接换display: grid。
- 检查父元素是否真为
display: grid或display: flex，别被 CSS 预处理器变量或 BEM 类名误导 - 子元素若设了
float、position: absolute或display: contents，会脱离布局流，gap对其无效 - Flex 下未加
flex-wrap: wrap且子项总宽超容器时，gap可能被压缩甚至消失（取决于flex-shrink）
移动端双列等宽+gap怎么防错？
移动端双列最常用display: grid + grid-template-columns: 1fr 1fr + gap，但有三个易踩点：
- 别用
margin-right模拟列间距——最后一列会多出空白，且横竖切换（flex-direction: column回退）时完全失效 -
1fr 1fr≠50% 50%：前者扣除gap后再均分，后者无视gap直接切，响应式下容易溢出 - 小屏（如
@media (max-width: 480px)）建议直接切单列：grid-template-columns: 1fr，强行维持双列会让文字过小、点击热区不足
真正容易被忽略的是：gap 的数值会影响整体高度/宽度计算。比如三行 grid，gap: 20px实际占用 40px 垂直空间（两处行间隙），做精确滚动锚点或动画时得把这部分预留进去。
