CSSGrid左右固定中间自适应布局技巧

本文详细介绍了如何使用 CSS Grid 实现经典“左右固定、中间自适应”的三栏布局，强调直接通过 `grid-template-columns: 200px 1fr 150px` 定义三列——左右设为固定像素宽度，中间用 `1fr` 自动占据剩余空间，写法简洁、语义明确、兼容性优秀；同时澄清了 `auto-fill` 并不适用于此类精确角色控制的场景，避免开发者误用导致布局失控，并补充了响应式调整（如小屏堆叠）和 Flexbox 兼容方案，让读者快速掌握高效、可靠且可维护的现代布局实践。

用 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>/
}</p>

补充：兼容老浏览器的备选（Flexbox）

如果需支持 IE10+，可用 Flexbox 替代：

.container {
  display: flex;
}
.left { width: 200px; }
.main { flex: 1; } /* 等效于 1fr */
.right { width: 150px; }

逻辑一致，只是语法不同。

基本上就这些 —— 固定+流体三栏，Grid 的 1fr 就是为此而生的，干净又可控。

本篇关于《CSSGrid左右固定中间自适应布局技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！