用 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;
}
<p>@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /<em> 全部堆成一列 </em>/
}
/<em> 或只显示中间内容：grid-template-columns: 0 1fr 0; 并配合 overflow: hidden </em>/
}如果需支持 IE10+，可用 Flexbox 替代：
.container {
display: flex;
}
.left { width: 200px; }
.main { flex: 1; } /* 等效于 1fr */
.right { width: 150px; }逻辑一致，只是语法不同。
基本上就这些 —— 固定+流体三栏，Grid 的 1fr 就是为此而生的，干净又可控。
以上就是CSS布局想实现左右固定中间流体怎么办_使用grid的auto-fill自动分配空间的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
671
收藏
