1fr 1fr未等宽因fr分配剩余空间，受padding、border、min-width等影响；需统一box-sizing: border-box、检查min/max约束，并用minmax(0,1fr)或aspect-ratio实现真正等比。
grid-template-columns里用1fr 1fr为什么没等宽？
因为fr分配的是“剩余空间”，不是容器总宽。如果单元格有固定宽的内边距、边框、或设置了min-width，实际可分配空间就变小了，1fr 1fr只能在那块剩余区域里平分——看着就不等。
常见错误现象：div设了padding: 16px，又没加box-sizing: border-box，内容区被压缩，fr按压缩后的宽度分，视觉上左窄右宽；或者某列写了min-width: 200px，另一列内容短，fr就往它身上多塞像素。
- 检查所有网格项是否统一用了
box-sizing: border-box - 确认没有意外的
min-width/max-width干扰分配逻辑 - 用浏览器开发者工具选中网格容器，看“Computed”里的
grid-template-columns是否真解析成两个1fr
想让每个格子严格等比例（比如3×3正方形网格），只靠fr不够
fr管列宽行高，但不管单元格内部的宽高比。1fr 1fr 1fr能保证三列等宽，但每行高度还是由内容撑开——除非你强制行高也用fr，且内容不溢出。
使用场景：响应式相册、图标墙、卡片列表。这时候真正需要的是“宽高等比缩放”，得配合aspect-ratio或padding-top技巧。
立即学习“前端免费学习笔记（深入）”；
- 现代方案（Chrome 103+、Firefox 110+）：
grid-template-rows: repeat(3, 1fr)+ 每个单元格加aspect-ratio: 1 / 1 - 兼容旧版：用
padding-top: 100%+position: relative+ 绝对定位内容 - 别在
grid-template-rows里写1fr 1fr 1fr就以为高度自动等比——它只等高，不等比
minmax(0, 1fr)比1fr更“老实”？
是的。默认1fr等价于minmax(auto, 1fr)，而auto会尊重内容最小尺寸，导致某些格子被撑大，破坏等比感。换成minmax(0, 1fr)，相当于告诉浏览器：“哪怕内容再小，也别给我留多余空间，按比例切”。
性能影响几乎为零，但兼容性要注意：minmax(0, 1fr)在 Safari 14.1+ 才稳定支持，旧版 Safari 可能退化成auto。
- 适用条件：网格项内容长度差异大，比如有的空，有的塞满文字
- 别滥用：如果所有格子都有图片或固定高组件，
1fr反而更直观 - 验证方法：把某个格子内容清空，看它是否和其他格子保持一致宽度
Grid等比网格在移动端横竖屏切换时错乱
问题不在fr，而在你用vw或固定px写了容器宽高，或者媒体查询没覆盖orientation: landscape。Grid本身响应无问题，但容器尺寸突变后，aspect-ratio和fr重新计算，若没约束好最小尺寸，就会挤压变形。
容易踩的坑：只写了@media (max-width: 768px)，却没处理@media (orientation: landscape) and (max-height: 400px)这种矮宽屏。
- 给网格容器加
min-width: 0和min-height: 0，防止父级约束干扰 - 用
clamp()替代固定px：比如width: clamp(200px, 90vw, 400px) - 横竖屏都要单独测：iOS Safari 的
viewport在旋转时可能延迟触发重排
box-sizing和minmax()的组合效果——它们不报错，但会让fr悄悄失效。 
