中间栏没撑开是因为1fr只分配扣除200px后的剩余空间，若父容器无明确宽度上下文（如未设width/max-width、是flex子项被flex-basis卡死、或漏写display: grid），则无剩余空间可分，1fr退化为0；同时内容层约束（如未设max-width的图片、未换行长文本）也会间接挤压中间列。
grid-template-columns: 200px 1fr 200px 为什么中间栏没撑开？
不是写法错，而是 1fr 没“剩余空间”可分。它只在扣除显式尺寸（如 200px）后剩下的宽度里分配，如果父容器本身没明确宽度上下文，1fr 就分不到像素。
- 父元素没设
width或max-width，又直接挂载在body下——浏览器认为它无限宽，但 Grid 实际计算时无约束，1fr退化为 0 - 容器是某个
display: flex子项，被flex-basis卡死宽度，Grid 容器实际宽度不足 - 忘了加
display: grid，只写了grid-template-columns，CSS 直接忽略该声明 - 某栏内容（比如未设
max-width: 100%的图片、没断行的长 URL）撑爆轨道，间接挤压中间列
验证方法：打开开发者工具，看中间列的 computed width 是否接近 0 —— 是的话，问题一定出在父容器或内容层。
三栏等宽用 repeat(3, 1fr) 还是 33.33%？
repeat(3, 1fr) 更可靠。它会先扣除 gap、padding、border，再把剩余空间三等分；而 33.33% × 3 容易超 100%，尤其父容器带 padding 时，不加 box-sizing: border-box 就可能溢出滚动条。
- 若父容器有
padding: 20px，务必配box-sizing: border-box -
repeat(3, 1fr)对内容不敏感：哪怕某栏放了个大图，列宽仍保持一致（只是内容可能溢出） - IE11 完全不支持
fr，需用@supports not (display: grid)降级到 Flex
小屏下三栏没塌成一栏？
1fr 本身不响应屏幕尺寸变化，必须显式干预。别指望 auto-fit 或 minmax() 自动兜底所有场景。
立即学习“前端免费学习笔记（深入）”；
- 移动端必须用媒体查询强制切换：
@media (max-width: 768px) { grid-template-columns: 1fr; } - 如果用了
minmax(300px, 1fr)却没响应，先检查最小宽度是否设太高（比如300px× 3 = 900px，而手机屏宽仅 375px） - 确保父容器没被外层限制宽度，比如上层有
max-width: 1200px但没配width: 100%，导致 Grid 容器实际可用宽度远小于视口 - Safari iOS 15.4 以下不支持
gap，得补grid-column-gap: 16px回退
内容撑开导致 1fr 失效怎么办？
1fr 只管空间分配，不管内容是否溢出。一张没设 max-width: 100% 的图、一个没断行的长单词，都可能让整行布局崩掉。
- 给图文容器加
min-width: 0（触发新 BFC，允许收缩） - 图片加
max-width: 100%; height: auto - 长文本加
overflow-wrap: break-word - 避免在 grid item 里嵌套
display: flex且未设flex-shrink: 1
真正容易被忽略的是内容层约束——写了 1fr 不代表万事大吉，computed width 一旦异常，问题永远不在 Grid 声明里，而在子元素自身。
