用 CSS Grid 实现左右固定、中间流体布局的正确写法是：.container { display: grid; grid-template-columns: 200px 1fr 150px; gap: 16px; }，其中 200px 和 150px 为左右固定宽，1fr 使中间列自适应填充剩余空间，语义清晰、兼容性好；auto-fill 不适用此场景。
用 CSS Grid 实现“左右固定、中间流体”的布局，不需要依赖 auto-fill —— 那是为重复轨道（比如网格项列表）设计的。真正简洁可靠的做法是直接用 grid-template-columns 明确定义三列：左列固定宽、中列用 1fr 自适应、右列固定宽。
正确写法：用 1fr 让中间自动撑满剩余空间
这是最直观、语义清晰、浏览器兼容性好（支持所有现代浏览器）的方式：
.container {
display: grid;
grid-template-columns: 200px 1fr 150px; /* 左200px、中自适应、右150px */
gap: 16px; /* 可选：列间间距 */
}说明：
-
200px和150px是固定宽度，不会随容器缩放 -
1fr表示“占用所有剩余可用空间”，天然流体 - 即使容器宽度变化（如响应式缩放），中间列始终填满左右之间的空隙
为什么不用 auto-fill？
auto-fill（配合 repeat() 和 minmax()）适用于动态生成等宽/等高网格项的场景，例如：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))); /* 多个卡片流式排列 */
它不适用于“精确控制三栏角色”的布局需求。强行套用反而会让结构变复杂、难以维护，还可能在小屏下意外换行或留白异常。
进阶：带响应式的微调
如果希望在小屏时让左右栏隐藏或堆叠，可以结合媒体查询：
.container {
display: grid;
grid-template-columns: 200px 1fr 150px;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; / 全部堆成一列 /
}
/ 或只显示中间内容：grid-template-columns: 0 1fr 0; 并配合 overflow: hidden /
}
补充：兼容老浏览器的备选（Flexbox）
如果需支持 IE10+，可用 Flexbox 替代：
.container {
display: flex;
}
.left { width: 200px; }
.main { flex: 1; } /* 等效于 1fr */
.right { width: 150px; }逻辑一致，只是语法不同。
基本上就这些 —— 固定+流体三栏，Grid 的 1fr 就是为此而生的，干净又可控。
