真正可控的左右对称布局需两侧等宽可伸缩、中间独立控宽，推荐写法：grid-template-columns: 1fr minmax(280px, 60ch) 1fr，并配合 justify-content: center、box-sizing: border-box 及统一行高。
左右对称布局不是靠“左右写两遍”实现的
直接写 grid-template-columns: 1fr 2fr 1fr 看似对称，但一旦内容高度不一致或子元素有 margin/padding 差异，视觉上就会偏移——因为 Grid 的对称性取决于轨道定义本身是否中心对齐，而不是列数奇偶或数值镜像。
真正可控的左右对称，是让两侧轨道**完全等宽且可伸缩**，中间区域独立承担内容宽度。常见错误是把中间设成固定值（如 300px），结果小屏下两侧被压缩、中间溢出。
-
1fr auto 1fr不可靠：中间auto会随内容撑开，破坏两侧弹性比例 -
1fr 2fr 1fr在窄屏下仍会挤压，且无法响应内容宽度变化 - 正确思路是「两侧用相同 fr 值 + 中间用 minmax() 控制最小/最大宽度」
用 repeat(auto-fit, ...) 实现动态对称列？别这么用
repeat() 本身不提供左右对称语义，repeat(auto-fit, 1fr) 或 repeat(3, 1fr) 都只是生成等宽列，不能天然区分“左/中/右”角色。强行套用会导致：
- 加了
gap后，总宽度计算偏差，视觉不对齐 - 子元素设置了
width: 100%或min-width，覆盖了 fr 分配逻辑 - 在 flex 容器内嵌套 grid，父级约束导致 fr 失效（比如外层
max-width: 1200px未配合margin: 0 auto）
需要对称结构时，显式写三列更清晰：grid-template-columns: 1fr minmax(300px, 700px) 1fr，其中中间列设合理范围，两侧始终等分剩余空间。
为什么 1fr 1fr 1fr 不等于左右对称
三等分列在数学上对称，但在实际渲染中容易失衡，原因在于：
- Grid 容器未设
justify-items: center或text-align: center，子项默认左对齐 - 中间列内容多、高度高，触发
grid-auto-rows行高变化，拉扯整体网格线 - 没加
box-sizing: border-box，padding/margin 让实际占用宽度超出 1fr 分配值 - 某些浏览器（如旧版 Safari）对
fr的解析存在微小差异，尤其在 subpixel 场景下
验证是否真对称：给每列加不同背景色 + outline: 1px solid red，观察 gap 是否均匀、列宽是否像素级一致。
真正鲁棒的左右对称写法
核心是分离控制权：两侧交由 fr 弹性分配，中间交由内容宽度驱动但设边界。推荐组合：
grid-template-columns: 1fr minmax(280px, calc(100vw - 2 * 1fr)) 1fr;
但这行代码在部分浏览器里不生效（calc() 与 fr 混用兼容性差），所以更稳妥的是：
- 用
minmax(280px, 60ch)代替动态计算，ch单位适配字体宽度，比px更语义化 - 加
justify-content: center到 grid 容器，确保整行居中（尤其当内容不足全宽时） - 子项统一设
width: 100%; max-width: 100%; box-sizing: border-box;，防止撑破 - 如果必须支持 IE11，放弃 fr，改用
display: flex+flex: 1两侧 +flex: 0 1 auto中间
最易被忽略的一点：对称感不仅来自列宽，还依赖行高一致性。若中间列文字多、自动换行，而两侧是图标或短标题，建议统一设 grid-auto-rows: minmax(120px, auto) 并配合 align-items: start。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
