本文介绍如何利用 grid-template-columns 中的 minmax() 函数，为左右边栏设置 20px–200px 的弹性宽度，同时让中间主体区域最小 320px、其余空间自动填充，实现真正响应式的三栏布局。
本文介绍如何利用 `grid-template-columns` 中的 `minmax()` 函数，为左右边栏设置 20px–200px 的弹性宽度，同时让中间主体区域最小 320px、其余空间自动填充，实现真正响应式的三栏布局。
要构建一个既稳健又灵活的三栏布局——左右为可伸缩边栏、中间为主内容区——CSS Grid 提供了最简洁、语义最清晰的解决方案。核心在于摒弃固定像素或百分比思维，转而使用 minmax(min, max) 函数定义每列的动态尺寸范围。
在 .portion 容器中，我们声明三列：
- 左栏：
minmax(20px, 200px)→ 始终不低于 20px，也不超过 200px，视可用空间自动收缩或撑开； - 中栏：
minmax(320px, 1fr)→ 至少占据 320px，剩余空间（即1fr）优先分配给它，确保内容区拥有最大可用宽度； - 右栏：同左栏，
minmax(20px, 200px)，保持对称弹性。
完整实现如下：
.portion {
display: grid;
grid-template-columns: minmax(20px, 200px) minmax(320px, 1fr) minmax(20px, 200px);
grid-template-rows: auto;
}
/* 可选：添加基础视觉反馈（如调试用） */
.portion > * {
height: 100px;
outline: 1px solid #ccc;
}
<div class="portion"> <div class="left"></div> <div class="core"></div> <div class="right"></div> </div>
⚠️ 注意事项：
-
1fr是“剩余可用空间”的单位，仅在minmax()的max参数中与固定最小值组合使用时，才能兼顾约束性与伸缩性； - 不推荐在
minmax()中混用fr作为min（如minmax(1fr, 200px)），这将导致无效声明； - 若需更精细控制（如不同断点下调整 min/max 值），可结合媒体查询覆盖
grid-template-columns； - 所有子元素默认按源顺序填入网格轨道，无需额外指定
grid-area（除非你启用了grid-template-areas并希望语义化命名）。
这种写法天然响应式：在窄屏下，左右栏压缩至 20px，中栏保持 320px；在宽屏下，左右栏扩展至 200px，中栏则平分剩余空间——无需 JavaScript，不依赖浮动或 Flex 多层嵌套，语义清晰、维护成本低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
