最稳固定比例三列网格应使用grid-template-columns配合fr单位，如1fr 2fr 1fr，fr按剩余空间等比分配且不受margin/padding干扰；避免混用px/%、minmax(0,1fr)及ie不兼容写法，确保容器为块级并占满宽度。
grid-template-columns 用 fr 单位最稳
固定比例三列网格的核心是让三列宽度严格按比例分配，比如 1:2:1 或 3:2:1。grid-template-columns 是唯一该用的属性，别碰 width、flex 或 JS 计算——那些要么失效，要么响应式下崩。
用 fr（fraction）单位直接写比例，浏览器自动按剩余空间等比切分：
grid-template-columns: 1fr 2fr 1fr;
这行代码就定义了「左:中:右 = 1:2:1」的固定比例。注意：fr 不是像素，不依赖容器绝对尺寸，也不受 margin/padding 干扰，天生适配缩放和响应式。
- 避免混用
px/%和fr，比如200px 1fr 1fr—— 第一列锁死像素后，后两列的“比例”实际只在剩余空间里生效，不再是全局固定比 -
minmax(0, 1fr)在某些旧版 Safari 里会破坏比例，纯fr更可靠 - 如果列内容超宽（比如长单词或未折行文本），可能撑开列宽，需额外加
overflow-wrap: break-word
gap 会影响视觉比例但不破坏 grid 定义
gap 设置列间距时，它从总容器宽度中扣除，再把剩余空间按 fr 分配。所以视觉上三列+两个 gap 的整体占比会变，但三列自身的比例关系不变。
例如容器宽 1000px，gap: 20px，实际用于三列的宽度只剩 960px；按 1fr 2fr 1fr 分，结果仍是 240px : 480px : 240px —— 比例毫发无损。
- 别用
padding模拟 gap，那会改变单列内部可用宽度，间接影响内容布局 - 如果设计稿要求“列内容边缘到容器边缘距离相等”，得把
gap和容器padding统一算进去，不能只看grid-template-columns - CSS 中
gap不支持百分比值，只能用px、em、rem等固定或相对单位
IE 不支持 fr，需要 fallback 方案
IE10/11 完全不识别 fr 单位，写上去等于没写，三列会默认堆成一列或按内容宽度挤在一起。
真要兼容 IE，得用 @supports 隔离现代写法，并给 IE 单独写 display: table 或 float 布局。但更现实的做法是：
- 确认项目是否真需支持 IE —— 大多数内部系统或新项目已可放弃
- 若必须支持，用 Autoprefixer + postcss-grid-fallback 插件自动生成
float备用规则，而不是手写两套 CSS - 千万别用
grid-template-columns: 25% 50% 25%当 fallback —— 百分比在有gap时会计算错误，且无法响应容器 padding 变化
content-fit 类容器里比例会失效
如果三列网格放在 display: inline-grid 或父容器设了 width: fit-content，整个网格会收缩到内容最小宽度，1fr 2fr 1fr 还在，但“剩余空间”几乎为零，导致所有列都按内容撑开，比例形同虚设。
这种情况必须确保网格容器是块级且宽度占满上下文，比如：
- 父元素没设
width限制，或明确写了width: 100% - 避免对网格本身设
width: fit-content、inline-grid或display: inline-block - 检查是否被
transform或position: absolute拉离文档流，导致宽度计算异常
比例网格真正的脆弱点不在写法，而在容器上下文是否“给足空间”——这点比语法细节更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
