应使用 minmax(240px, 320px) 1fr 实现两栏布局：左栏设像素上下限确保可读性与空间克制，右栏必须用 1fr 动态占满剩余空间，避免 auto 或 fit-content 导致留白或溢出；小屏需媒体查询重写 grid-template-columns 为 1fr，而非依赖 minmax 隐藏。
直接用 grid-template-columns: minmax(240px, 320px) 1fr 就能实现左栏弹性、右栏自适应的两栏布局，比百分比或纯 1fr 1fr 更可控，也比媒体查询更轻量。
为什么不用 minmax(150px, 25%)？
25% 是相对父容器计算的，但和 1fr 混用时语义冲突：浏览器无法同时满足“≤25%”和“占剩余空间”两个约束。结果是左栏可能被压缩到最小值后卡死，或者在中等宽度下意外撑开、挤占主内容。真正起作用的是像素下限 + fr 上限组合，比如 minmax(240px, 320px) —— 它明确告诉 Grid：“左栏至少 240px 可读，最多 320px 不抢空间”，其余全归右栏。
右栏必须用 1fr，不能用 auto 或 fit-content
右栏承载正文、表单或长文本，需要动态填满所有剩余空间。如果写成 auto，它会按内容高度收缩，导致右侧留白；写成 fit-content(600px) 则上限固定，窄屏下容易溢出。1fr 才是唯一能随左栏变化实时重分配的单位。
-
1fr不是“固定比例”，而是“扣除已知轨道后的剩余空间均分”——左栏变宽，右栏自动收窄，反之亦然 - 右栏子元素若含长 URL 或连续英文，必须加
min-width: 0+overflow-wrap: break-word，否则 Grid 默认的min-width: auto会强行撑开整列 - 不要给右栏设
width、flex或float，这些会让 Grid 轨道计算中断，降级为普通块流
小屏切单列，别靠 minmax 隐藏
minmax() 不控制显示/隐藏，它只管尺寸范围。侧边栏在移动端收起，必须用 display: none 或 transform: translateX(-100%) 配合 transition 实现。媒体查询里应整套重写 grid-template-columns，例如：
.layout { grid-template-columns: minmax(240px, 320px) 1fr; }
@media (max-width: 768px) {
.layout { grid-template-columns: 1fr; }
}
注意：不是只改左栏，也不是加 minmax(0, 0) —— 后者无效，Grid 不会因 minmax 范围为 0 而移除轨道。
拖拽调整宽度时，minmax 不起作用
想让用户手动拉伸侧边栏，得靠 resize: horizontal + overflow: hidden，但 minmax() 本身不参与运行时约束。必须显式设置 min-width: 240px 和 max-width: 320px，否则拖拽会失控。JS 监听 resize 事件才能读取新宽度并同步更新状态或 localStorage。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
