fr单位未让子项撑满容器的主因是子项默认min-width: auto阻止收缩，需显式设min-width: 0解除限制；grid-template-columns定义轨道分配，子项宽度由轨道与自身约束共同决定。
grid-template-columns里fr单位为什么没让子项撑满容器
常见错误是写成 grid-template-columns: 1fr 1fr; 却发现子项宽度不等于容器剩余空间——其实不是fr失效，而是网格项默认有min-width: auto，会阻止它收缩到比内容还窄，更不会主动“占满”你认为的“剩余空间”。
真正起作用的是网格轨道（track）的分配逻辑，不是子项自己的宽高声明。子项是否填满，取决于它是否被允许拉伸、以及是否有其他约束干扰。
- 确保父容器有明确宽度（比如
width: 100%或固定值），否则fr无参照 - 给网格项加
min-width: 0，解除默认的min-width: auto限制 - 避免给网格项设死
width、max-width或flex相关属性，它们会覆盖网格的尺寸分配
用100% width和grid结合时为什么子项溢出或错位
把width: 100%硬加在网格项上，常导致横向溢出或破坏fr计算——因为width: 100%是相对于父容器内容区计算的，而网格布局中，父容器可能有gap、padding或滚动条，此时100%就不再匹配单个轨道宽度。
更关键的是：网格项的宽度由网格轨道控制，手动设width属于冗余且易冲突的操作。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有对网格项写的
width: 100%或width: 100vw - 如果想让某列完全占满剩余宽度，直接用
grid-template-columns: 1fr或grid-template-columns: 200px 1fr - 若需兼容老浏览器（如IE），
fr不可用，才考虑用width: calc(100% - 200px)这类兜底，但必须同步处理gap带来的偏移
grid-auto-fit和grid-auto-fill配合fr时的实际表现差异
这两个属性影响的是“隐式网格”的生成方式，但很多人误以为它们能控制显式轨道的填充行为。实际上，只要写了grid-template-columns，auto-fit/auto-fill就只管自动列的数量，不影响单列是否占满。
真正决定“占满”的，还是fr轨道 + 子项可缩放性。
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))：列宽至少200px，最多均分剩余空间，空列会被压缩消失 -
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))：同样规则，但空列仍保留，可能导致右侧留白 - 两者都不改变单个
1fr列的“占满”本质——它始终按比例瓜分可用空间，前提是子项没锁死尺寸
Flexbox里justify-content: stretch和Grid里fr的本质区别
初学者容易混淆：Flex里子项默认“拉伸”填满交叉轴，Grid里却要靠fr和min-width: 0才能实现类似效果。这是因为Flex的“stretch”是默认对齐行为，而Grid的“拉伸”需要显式定义轨道容量 + 解除子项最小尺寸限制。
换句话说：fr定义的是“轨道能分多少”，min-width: 0才是让子项“敢去拿多少”的开关。
- Flex中
align-items: stretch对齐交叉轴，Grid中对应的是align-items或align-self，和fr无关 - Grid主轴方向（行内方向）的“占满”，只由
grid-template-columns和子项min-width共同决定 - 一旦用了
grid-column: span 2之类合并，该子项就会跨轨道，此时它的宽度由所跨轨道总和决定，不受单个fr限制
事情说清了就结束。最常被卡住的地方，其实是忘了min-width: 0这行样式——它不显眼，但缺了就等于给fr上了锁。
