grid-template-columns 混用固定值和 1fr 是标准且推荐的做法；例如三列布局可写为 200px 120px 1fr，其中 1fr 分配容器宽度减去固定列后的可用自由空间，多 fr 按比例分配，需确保父容器设 display: grid 且有明确宽度。
可以，grid-template-columns 混用固定值和 1fr 是标准且推荐的做法，浏览器支持良好，无需 polyfill。
怎么写 grid-template-columns 实现固定列 + 自适应列
直接在 grid-template-columns 中按顺序写入具体像素/百分比值和 1fr 即可。例如三列布局：第一列固定 200px，第二列固定 120px，剩余空间给第三列：
grid-template-columns: 200px 120px 1fr;
注意：1fr 不会“填满剩余所有空隙”，它只分配**可用的自由空间**（即容器宽度减去所有固定列宽后的剩余部分）；如果还有其他 fr 单位，它们会按比例瓜分该剩余空间。
常见错误：1fr 没生效或列宽异常
多数问题出在父容器或 Grid 本身未满足基本渲染条件：
- 父容器没有设置
width或被内容撑开，导致1fr计算基准为 0 - 忘了给容器声明
display: grid - 设置了
min-width: fit-content或width: max-content等破坏弹性行为的样式 - 子元素设置了
width或min-width强制覆盖 Grid 分配逻辑
更灵活的场景：固定列 + 多个自适应列
比如左侧菜单固定 240px，右侧主内容区再分两栏等宽（各占剩余空间一半）：
grid-template-columns: 240px 1fr 1fr;
或者想让中间列优先占更多空间（如 2 份），右侧列占 1 份：
grid-template-columns: 240px 2fr 1fr;
此时注意：所有 fr 的总份数不影响最终宽度，只影响比例；2fr 1fr 和 6fr 3fr 效果完全一样。
和 table / flex 布局的关键区别
Grid 的 1fr 是基于**网格容器的可用内宽**计算，不依赖子项内容长度；而 flex: 1 在 Flexbox 中虽然也常用于自适应，但若子项有固有宽度（如图片、长文本），可能触发最小尺寸限制，导致实际伸缩不如 Grid 可控。
另外，Grid 允许你明确控制行列关系（比如跨列、对齐方式），而纯 flex 往往需要嵌套才能模拟多维布局——这点在固定列+自适应列的后台管理系统中特别明显。
真正容易被忽略的是：当容器本身宽度随视口变化时（比如响应式），1fr 对应的像素值是动态重算的，但固定列（如 200px）始终不变——这意味着小屏下可能出现横向滚动或内容挤压，需要配合 minmax() 或媒体查询做兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
