CSS Grid轨道线始终以容器content box为基准，padding会整体偏移所有轨道线；grid-column:1等定位均从content box起算，不受padding外边界影响。
grid容器的padding会偏移整个网格轨道起始线
容器设了 padding，网格项（grid-item）的 grid-column: 1 并不贴着容器左边缘，而是从 padding-left 之后开始。这不是 bug，是规范明确的行为：CSS Grid 的轨道线（包括第 1 行/列线）始终相对于容器的 content box 起算，而 padding 属于 content box 内部边界。
常见错误现象：grid-column: 1 / -1 想撑满容器宽度，结果左右各空出 padding 大小；用 justify-self: start 也对不齐容器左边缘。
- 若需网格项真正顶到容器外边（比如全宽背景），要么去掉容器
padding，改用gap或子项margin - 或者把网格容器包一层 wrapper，让 wrapper 负 margin 抵消 padding（慎用，影响可维护性）
- 更稳妥的做法：用
grid-template-areas或显式定义列轨道时，把 padding 空间纳入轨道计算，例如grid-template-columns: 20px 1fr 20px替代padding: 0 20px
grid-column-start: 1 和 grid-area 的起始位置是否受 padding 影响
受。只要值是数字（如 1）、关键字（如 start）或命名线（如 header-start），其定位基准都是容器 content box 的左上角 —— 也就是在 padding 内侧。即使你写了 grid-area: "header";，它依然从 content box 开始布局，不会跨过 padding。
使用场景：做响应式卡片栅格时，常希望第一列卡片紧贴视口左边缘，但容器加了 padding: 0 1rem 后所有卡片整体右移，此时不能靠调整 grid-column 值来“修正”，因为轨道线本身已偏移。
立即学习“前端免费学习笔记（深入）”；
-
grid-column: 1永远指向第一条列轨道线，这条线就在padding-left右侧 - 想让某子项突破 padding，只能给它设
position: relative; left: -1rem;（不推荐）或换用margin-left: -1rem（需确保父容器 overflow: visible） - 更好的解法：用
container-type: inline-size+@container查询动态调整 padding，把视觉“顶边”逻辑交给容器而非网格线
gap 和 padding 在网格布局中的分工差异
gap 控制的是网格轨道之间的空隙，它不移动轨道线，只撑开间隔；padding 移动的是整个轨道系统的原点。这是二者最根本的区别。
性能影响很小，但语义混淆会导致后期难维护：有人误以为 padding 是“给网格留白”，结果在媒体查询里反复调 padding 却发现网格项位置跳变不可控。
-
gap: 1rem→ 第1列线到第2列线之间距离为 1rem，第1列线位置不变 -
padding: 1rem→ 第1列线向右平移 1rem，所有列线跟着一起动 - 兼容性上，
gap在 Flexbox 和 Grid 中行为一致，而padding对 Grid 的影响容易被忽略（尤其在嵌套网格中）
用 devtools 快速验证网格线是否被 padding 偏移
Chrome / Firefox 的 Grid 面板默认只显示轨道线相对于 content box 的位置，看起来一切正常。但如果你没打开「Show line numbers」或没注意面板左上角标注的坐标系原点，很容易误判。
实操建议：在 Elements 面板选中网格容器，右侧 Styles 标签页确认 padding 值；然后点 Layout → Grid，勾选「Show line numbers」和「Show track sizes」；观察第1行/列线是否真的从 (0, 0) 出发 —— 如果不是，说明 padding 已生效。
- Firefox 更直观：Grid 面板底部会写 “Origin: content box”，直接提醒你参考系在哪
- 不要依赖“看起来对齐”做判断，必须看 devtools 显示的线编号和尺寸标注
- 当嵌套多层 grid 容器时，每一层的 padding 都独立偏移其内部轨道系统，调试时得逐层展开看
真正麻烦的不是 padding 本身，而是它和 grid-template-areas、subgrid 或 place-items 混用时，偏移会叠加又不易察觉。这时候别猜，打开 devtools 的 Grid 面板，盯着那条标着 “1” 的线看三秒。
