Grid容器遵循标准盒模型，但子项尺寸由网格轨道和对齐属性共同决定，而非自身width/height；fr单位分配剩余空间，子项stretch时width被忽略，需用align-self: start等显式控制。
grid 容器本身遵循盒模型，但子项的尺寸计算逻辑不同
是的，grid 容器元素（即设置了 display: grid 的元素）完全遵循标准盒模型：它的 width、height、padding、border、margin 都按常规方式参与布局和尺寸计算。但关键在于——grid 子项（grid items）的尺寸**不直接由自身的 width/height 决定**，而是由网格轨道（track）、grid-template-columns/grid-template-rows、以及 grid-column/grid-row 等属性共同约束。
grid-template-columns 中的长度值如何与盒模型交互
你在 grid-template-columns 里写的值（比如 100px、1fr、minmax(200px, 1fr)）定义的是**轨道（track）的可用尺寸**，不是子项的最终盒尺寸。子项内容是否撑开、是否受 box-sizing 影响，取决于它自身是否显式设置了 width/height 或 min-width/max-width：
-
fr单位分配的是**剩余可用空间**（扣除所有固定尺寸轨道、gap 和边框/内边距后的空间），它不关心子项的box-sizing -
px/em等绝对或相对单位定义的是轨道基准尺寸，子项若未设置width，默认会 stretch 填满该轨道 —— 此时它的实际宽度 = 轨道净宽 − 自身padding−border（受box-sizing控制） - 如果子项设置了
width: 200px且box-sizing: border-box，它仍可能被网格轨道裁剪（overflow）或触发自动调整（如minmax(auto, 1fr)）
子项的 margin/padding/border 是否影响网格布局流
子项的 margin、padding、border **不影响网格轨道划分**，但会影响子项在轨道内的实际渲染尺寸和位置：
-
margin：在子项之间产生间隙（但推荐用gap控制网格间隙，margin可能导致意外对齐偏移） -
padding和border：受box-sizing控制，决定子项内容区（content box）大小；当子项 stretch 填满轨道时，这些值会从轨道净宽中扣除 - 特别注意：
gap是网格容器级属性，它作用于轨道之间，不参与子项的盒模型计算，也不受子项margin影响
常见错觉：为什么设了 width 却没生效
这是最常被误解的一点：你给子项写了 width: 300px，但它看起来还是占满整列。原因通常是：
立即学习“前端免费学习笔记（深入）”；
- 子项默认
align-self: stretch且所在列轨道没有固定宽度（比如是1fr），此时width被忽略，优先按轨道 stretch - 父容器设置了
grid-auto-columns: 1fr，而你没用grid-column显式指定列范围，子项被自动放入单列并拉伸 - 你忘了重置
align-self或justify-self，例如改成align-self: start才能让width生效
.container {
display: grid;
grid-template-columns: 1fr 200px;
}
.item {
width: 150px; /* 在第二列会生效（因轨道固定为 200px） */
align-self: start; /* 关键：取消 stretch，让 width 控制尺寸 */
}网格布局不是绕过盒模型，而是把“尺寸控制权”从子项上收了一层，交给了容器定义的轨道系统。真正容易被忽略的，是 align-self/justify-self 的默认值和 grid-auto-* 系列属性的隐式行为——它们往往比 box-sizing 更早介入尺寸决策。
