Grid项的width/height相对于其所在网格轨道的可用空间计算，受grid-template-columns/rows定义的轨道尺寸约束，并结合box-sizing、padding、border及对齐属性共同决定。
grid 项的 width/height 是相对于谁计算的
Grid 项的 width 和 height 默认不是相对于父容器（grid container）内容区，而是受 grid-template-columns / grid-template-rows 定义的轨道尺寸约束后，再结合自身的盒模型行为共同决定。
关键点在于：**网格项的尺寸计算发生在 grid 布局算法内部，不走常规的块级流盒模型逻辑**。它先被分配到某个单元格（cell），然后在这个单元格的“可用空间”内，按 box-sizing、padding、border、margin 等规则渲染自身内容。
-
margin在 grid 项上有效，但外边距合并（margin collapse）不发生 -
padding和border会从单元格的可用空间中扣除（如果box-sizing: border-box） - 若未显式设置
width/height，默认拉伸填满所在轨道（除非有align-self/justify-self干预）
grid-column-start/end 影响尺寸计算吗
不影响直接计算，但间接决定可用空间大小。比如一个项声明了 grid-column: 1 / -1，它横跨全部列轨道，那么它的宽度就基于所有列轨道总和减去 gutter（即 grid-column-gap）来算；而 grid-column: 2 / 3 就只占第二列轨道的宽度。
注意：轨道本身可能是 fr、px、auto 或 minmax()，这些都会影响最终分配给该网格项的“基础宽度”。例如：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 100px 1fr 200px;
}
.item {
grid-column: 2 / 3; /* 占中间那个 1fr 轨道 */
}此时 .item 的宽度由剩余空间动态决定，而不是由自身 width 值主导。
box-sizing 对 grid 项是否起作用
起作用，而且非常重要——它决定 padding 和 border 是“撑开”还是“挤进”分配到的单元格空间。
-
box-sizing: content-box（默认）：width指内容宽，padding+border额外增加尺寸 → 可能溢出单元格 -
box-sizing: border-box：width包含padding和border→ 更可预测，推荐统一设置
尤其当使用 fr 单位或响应式布局时，content-box 容易导致意外换行或滚动条。
margin:auto 在 grid 项中为什么能居中
因为 grid 布局把 margin: auto 当作一种对齐信号，而非传统块流中的“剩余空间均分”。只要网格项在对应轴上有明确的可用空间（比如轨道比内容宽），margin: auto 就会把剩余空间平均分配到左右（或上下）外边距。
- 仅在单个轨道内生效（不能跨轨道居中）
- 需确保没有设置
justify-self或align-self覆盖它 - 水平居中：同时设
margin-left: auto; margin-right: auto; -
垂直居中：需父容器有明确高度，且设
margin-top: auto; margin-bottom: auto;
这和 flex 中的 margin: auto 行为一致，但底层机制不同——grid 是在 track alignment 阶段处理的。
最常被忽略的是：grid 项的尺寸不是靠自身 width/height 主导的，而是轨道定义 + 对齐控制 + 盒模型三者共同作用的结果。改一个 grid-template-columns，可能让十个子项的视觉表现全变，但它们的 CSS 样式一行都没动。
