Grid 原生支持固定值与 fr 混用，如 240px 1fr 实现左栏固定右栏自适应；三栏可写为 1fr 800px 1fr；推荐用 minmax(320px, 1fr) 防小屏压缩；需设 display: grid 和明确宽度上下文，避免 width 干扰。
直接用 grid-template-columns 混写固定值和 fr 单位就能实现，这是 Grid 的原生能力，不是“技巧”，而是标准用法。
固定 + 自适应的基本写法
比如左栏固定 240px，右栏占满剩余空间：
grid-template-columns: 240px 1fr;- 父容器必须设
display: grid，且有明确宽度上下文（如width: 100%或处于块级流中） -
1fr不是“填满所有剩余像素”，而是分配容器内宽减去固定列后的自由空间
中间固定、两边自适应的三栏
常见于全宽背景+居中内容的场景：
-
grid-template-columns: 1fr 800px 1fr;—— 中间刚性 800px，左右均分剩余空间 - 背景要加在网格容器上，内容区域用
grid-column: 2 / 3或命名区域限定位置 - 避免用
auto替代1fr，否则无内容时列会塌缩成线
带最小宽度保护的自适应列
防止小屏下自适应列被压缩到无法阅读：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: 200px minmax(320px, 1fr);-
minmax(320px, 1fr)表示该列至少 320px，宽屏时可继续伸展 - 比单纯写
1fr更健壮，尤其适合文字为主的内容区
响应式兜底与兼容注意
固定像素列在窄屏下容易引发横向滚动或挤压：
- 用媒体查询降级：小屏时改为
grid-template-columns: 1fr;单列堆叠 - IE 和旧版 Edge 不支持
fr，需 fallback 到 Flexbox 或calc() - 别给子项设
width或min-width，会干扰 Grid 的轨道分配逻辑
