minmax()适合侧边栏因提供“下限保可用、上限防侵占”的双保险：最小值确保可读性，最大值防止挤占主内容；正确写法为grid-template-columns: minmax(150px, 25%) 1fr，其中1fr占剩余空间，minmax仅约束侧边栏。
minmax() 为什么适合做侧边栏宽度约束
因为侧边栏既不能太窄（影响可读性），也不能无限撑开（挤占主内容），minmax() 正好提供「下限保可用、上限防侵占」的双保险。它不是让列固定为某个比例，而是定义一个弹性区间：只要容器够宽，就尽量按最大值分配；不够宽时，退守最小值不崩溃。
grid-template-columns 里怎么写 minmax(150px, 25%) 才生效
直接写 minmax(150px, 25%) 是常见错误——25% 是相对父容器计算的，但和 1fr 混用时语义冲突。正确写法是：
.layout {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
-
minmax(150px, 25%)表示：宽度 ≥ 150px，且 ≤ 父容器宽度的 25% -
1fr占据剩余所有空间，自动响应侧边栏变化 - 不要写成
minmax(150px, 25%) minmax(0, 1fr)—— 后者会让第二列也参与 minmax 计算，失去“填满剩余”的本意 - IE 完全不支持
fr和minmax()，必须单独加媒体查询降级为float或flex
小屏下侧边栏消失或错位？检查 auto-fit 是否误用
有人把侧边栏也塞进 repeat(auto-fit, minmax(...))，结果小屏时侧边栏被“吃掉”或换行——这是混淆了「区域布局」和「内容网格」。侧边栏属于页面骨架，不该用 auto-fit 动态生成列数。
- 用
grid-template-columns显式定义结构（如minmax(150px, 25%) 1fr），再配@media切换为1fr单列 -
auto-fit只适用于卡片列表、导航项等子元素数量不确定的场景 - 如果侧边栏在小屏要收起，别靠
minmax()隐藏，用display: none或transform: translateX(-100%)更可控 - DevTools 的 Layout 面板里勾选 “Show line numbers”，能一眼看出轨道是否被意外合并
想拖拽调整侧边栏宽度，minmax() 能不能配合 resize 实现
可以，但 minmax() 本身不触发拖拽，它只管尺寸范围；真正起作用的是 resize + overflow 组合。
- 给侧边栏加：
resize: horizontal; overflow: hidden; min-width: 180px; max-width: 400px; -
min-width/max-width必须显式设置，否则resize会失控（minmax()不参与运行时约束） - 主内容列保持
1fr，会自动跟随侧边栏宽度变化 - 注意：只有
overflow不是visible的块级元素才支持resize，且默认仅右下角可拖——要用 JS 监听resize事件读取新宽，才能同步更新状态或 localStorage
minmax() 定边界、fr 分空间、@media 切结构、resize 做交互——四者各司其职，混用反而容易互相干扰。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
