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用于打破“最小高度为内容高度”的默认限制，让滚动机制真正激活
