fr单位计算不扣除padding，它基于容器padding-box宽度分配剩余空间；视觉不均主因是min-width:auto锁死轨道及box-sizing未设为border-box。
fr单位计算时是否扣除padding？
不扣除。fr 基于容器的 padding-box 宽度（即 content + padding）分配剩余空间，但 padding 本身不参与“可分空间”的扣减——它只是让内容区变窄，而 fr 分的是整个 padding-box 内的可用宽度。如果你看到列宽“变小了”，大概率是 box-sizing 没设对，导致 padding 外扩、挤压了内容区。
为什么加了padding后1fr列看起来不等宽？
这不是 fr 计算错了，而是子项默认 min-width: auto 锁死了轨道最小宽度，而 padding 加大了子项内部内容的渲染宽度（比如文字换行点偏移、图片缩放边界变化），间接触发了 min-content 膨胀。常见表现：
- 两列都设
1fr，但一列里有个padding: 20px的卡片，里面塞了长 URL → 该列轨道被撑到 320px，另一列只剩 180px - 父容器没设
box-sizing: border-box，子项 padding 实际外溢，视觉上列间距错位，误以为 fr 不均 -
gap和padding叠加造成视觉混淆：gap 是轨道间空隙，padding 是项内留白，二者不抵消也不合并
如何让padding不影响fr视觉一致性？
关键不是去掉 padding，而是切断它对轨道尺寸的干扰链。必须同步做两件事：
- 网格容器设
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 所有网格项加
min-width: 0（包括嵌套了display: flex或display: grid的子元素） - 全局加
* { box-sizing: border-box }，确保 padding 不撑出容器边界
只改其中一项，fr 依然会被内容顶开——minmax(0, 1fr) 放宽轨道下限，min-width: 0 解除子项对轨道的锁死，二者缺一不可。
gap和padding混用时的典型陷阱
gap 会从容器总宽中整体扣除（例如 grid-template-columns: 1fr 1fr; gap: 16px → 两列共享一个 16px 空隙），而 padding 属于子项自身盒模型，不参与 fr 分配逻辑。容易踩坑的组合：
- 写成
gap: 1rem+ 子项padding: 1rem，结果项内留白和项间空隙都是 1rem，但视觉节奏混乱（尤其在响应式缩放时） - 媒体查询里只调
gap却忘了同步调子项padding，小屏下 padding 相对过大，内容被挤得看不清 - 用
em设padding，但父元素font-size动态变化（如用户缩放），导致 padding 像素值跳变，间接影响min-content测量稳定性
真正难调试的，永远是 min-width: 0 漏加在哪一层子元素上——它可能藏在某个 .card__content 里，而不是直接写在 .grid > .item 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
