Grid子元素的width/height默认是内容区尺寸，受box-sizing影响；设为border-box时才包含padding和border，确保与轨道尺寸对齐。
Grid子元素的width/height到底算谁的尺寸
Grid容器只负责划分轨道（track）和分配空间框架，子元素自身的尺寸仍由CSS盒模型决定。也就是说：width 和 height 默认仍是内容区尺寸，不是整个格子的可用空间——除非你显式覆盖或用box-sizing: border-box重定义计算方式。
常见错误现象：给Grid项设了width: 100%，但加上padding: 16px和border: 2px后，它就溢出轨道；或者用grid-template-columns: 200px 1fr，第一列却比200px还宽。
- 原因在于默认
box-sizing: content-box，width: 100%只占内容区，padding和border额外加在外部 - 百分比宽度（如
width: 100%）参照的是Grid项所在轨道的**可用内联尺寸**，不是Grid容器总宽 - 若父Grid轨道本身是
fr或auto且未被约束，100%可能退化为内容自然宽，而非你预期的“填满格子”
box-sizing: border-box 是Grid布局的刚需
在Grid中不设box-sizing: border-box，等于主动放弃尺寸可控性。因为Grid轨道大小是“分配出来”的，而子元素默认按content-box扩张，padding和border会悄悄吃掉本该留给内容的空间，甚至撑破轨道边界。
推荐做法是全局重置：
*, *::before, *::after {
box-sizing: border-box;
}
这样之后，width: 100%、width: 200px等值就真正代表“元素整体宽度”，含padding和border，和Grid轨道尺寸对齐更可靠。
- 不设
border-box时，padding和border会叠加在width之外，极易导致横向溢出或滚动条 - 即使用了
fr单位分轨道，子元素内部的盒模型失控仍会让视觉错位——比如文字贴边、按钮被截断 -
min-width: 0常需配合使用，防止auto轨道下内容强制拉伸（尤其含长单词或图片时）
Grid轨道尺寸与子元素尺寸不是一对一映射
Grid通过grid-template-columns等定义的是“轨道大小”，不是“子元素必须遵守的宽高”。子元素可以小于此空间（留白），也可以超出（溢出），取决于它的盒模型行为和内容本身。
例如：
.grid { grid-template-columns: 200px 1fr; }
.item { width: 100%; padding: 12px; } /* 若未设border-box，实际宽=200px+24px > 轨道宽 */
-
fr单位分配的是剩余空间，不阻止内容撑开自身（如长文本、未约束的图片） -
auto轨道按子元素min-content起步，但会被同行其他轨道挤压或拉伸，行为不如fit-content()可控 - 想让子元素严格适应轨道？除了
box-sizing: border-box，还需结合min-width: 0、overflow: hidden或max-width: 100%
容易被忽略的margin和gap作用差异
margin属于子元素自身盒模型的一部分，影响其在轨道内的定位和是否溢出；而gap是Grid容器属性，控制轨道之间的间距，不参与子元素尺寸计算。
典型陷阱：
- 给Grid项设
margin: 10px，结果发现它离轨道边缘有20px空隙——其实是margin把元素往里缩了10px，而gap又在外侧加了10px -
gap不会压缩子元素，但margin会减少子元素可用空间，间接影响width: 100%的计算基准 - 当用
justify-self: center时，margin: auto仍有效，但优先级低于Grid对齐规则，行为可能不直观
真正难处理的，往往不是轨道怎么划，而是子元素在拿到那块空间后，如何老老实实待在里面——这全靠盒模型那一套算清楚，少一个box-sizing，后面所有Grid设置都可能打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
