1fr 3fr 不等于25%:75%是因为fr分配的是减去padding/border/min-width等不可压缩空间后的剩余宽度；严格比例宜用25% 75%配合box-sizing:border-box，或minmax(25%,1fr) 1fr兼顾弹性与最小限制。
直接用 grid-template-columns: 1fr 3fr 是对的，但实际效果可能和你预期不符——因为 fr 单位分配的是**剩余可用空间**，不是整个容器宽度的严格比例。
为什么 1fr 3fr 不等于整容器的 25% : 75%
当左右栏有 padding、border、或设置了 min-width/max-width，或者其中一栏内容撑开了固有宽度（比如图片、长单词、white-space: nowrap），fr 就会先减去这些“不可压缩”的部分，再分配剩余空间。结果就是左栏可能远宽于 25%。
- 检查是否给列项加了
box-sizing: content-box（默认值），导致padding和border额外增加宽度 - 确认没有设置
min-width: auto（Flex/Grid 默认行为，会阻止收缩） - 如果用了
grid-auto-fit或grid-auto-fill，需配合minmax()控制单列最小尺寸
更稳妥的写法：用百分比 + box-sizing
如果目标就是严格的视觉比例（比如响应式侧边栏），直接用百分比反而更可控：
grid-container {
display: grid;
grid-template-columns: 25% 75%;
/* 确保 padding/border 不撑大 */
box-sizing: border-box;
}
注意：25% / 75% 在小屏幕下可能因四舍五入出现 1px 偏差；若需精确到像素级对齐，可改用 calc()：
grid-template-columns: calc(25% - 1px) calc(75% + 1px);
想兼顾弹性与比例？用 minmax() + fr
既希望比例主导，又允许内容适度撑开（比如右栏放表格），推荐：
grid-template-columns: 1fr minmax(75%, 3fr);
含义：左栏占 1 份弹性空间；右栏至少占容器宽度的 75%，最多不超过 3 份弹性空间（避免过度挤压左栏）。这种组合在内容长度波动时更健壮。
-
minmax(25%, 1fr)适合左栏：确保不窄于 25%，也不无限缩 - 避免写
minmax(1fr, 3fr)—— 语法错误，minmax()第一个参数不能是fr
真正决定比例的不是 fr 数字本身，而是它作用在哪个「剩余空间」上。调试时打开浏览器开发者工具，看 Computed 面板里每列的 grid-column-start 和实际渲染宽度，比猜更准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
