CSS Grid尺寸异常主因是盒模型误用：需统一box-sizing: border-box、避免width: 100%、慎用min-width: auto（应设为0）、约束固有尺寸（如img width: 100%）、逐层设置height: 100%并配min-height: 0激活滚动。

CSS Grid布局中出现尺寸异常，往往不是Grid本身出错，而是盒模型行为在网格上下文中被忽略或误用。Grid定义了轨道和空间分配规则，但每个网格项（grid item）仍是独立的CSS盒子——它的最终尺寸受box-sizing、padding、border、min-width/min-height以及内容固有尺寸共同影响。

盒模型默认值会撑大网格项

默认box-sizing: content-box意味着：当你给网格项设width: 100%或minmax(300px, 1fr)时，300px只是内容区宽度；一旦加上padding: 16px和border: 2px solid，实际占用宽度就变成300px + 32px + 4px = 336px，可能突破列轨道限制，导致换行错位或横向溢出。

• 统一设置*, *::before, *::after { box-sizing: border-box; }是必须的第一步
• 避免在网格项上直接写width: 100%——Grid已通过grid-template-columns控制列宽，额外设宽易冲突
• 若需内边距，优先用gap代替padding；实在要用padding，确保border-box已启用

min-width: auto 是隐藏的“尺寸锚点”

网格项默认min-width: auto（块级）或min-width: 0（flex/grid子项），这个看似不起眼的默认值，在minmax()或1fr场景下极易引发问题：

• 当图片或长文本未加约束，min-width: auto会让网格项拒绝收缩，哪怕列轨道已缩小，它仍按内容原始宽度撑开
• 解决方法：显式写min-width: 0（对网格项本身）或min-width: 0配合overflow: hidden（对内部容器）
• 特别注意嵌套Grid/Flex容器：子容器若未设min-width: 0，其父网格项也会被“撑住”

内容固有尺寸覆盖弹性分配

Grid的1fr或minmax()只提供“可用空间”的分配逻辑，但不强制内容服从。例如：

• 一张width: 500px的图片放在minmax(200px, 1fr)列中，若容器宽度＜500px，图片会溢出而非缩放
• 一段无空格的超长URL（如base64字符串）默认不换行，会横向拉伸整个网格行
• 应对方式：img { width: 100%; height: auto; } + .text { word-break: break-word; overflow-wrap: break-word; }

height: 100% 不自动继承，需逐层打通

当网格项内嵌多层结构（如卡片→header+body→滚动区），常遇到1fr行高失效、滚动条不显示等问题，根源在于高度链断裂：

• Grid容器若无明确高度（如height: auto），其子项的100%就无参照，1fr失去计算基础
• 解决路径：外层容器设height或max-height → 网格项设height: 100% → 内部滚动区设min-height: 0 + overflow-y: auto
• 关键补丁：min-height: 0用于打破“最小高度为内容高度”的默认限制，让滚动机制真正激活