侧边栏不收缩因fr单位默认填满剩余空间，需用minmax(0,1fr)或固定宽度；媒体查询切换时须同步更新grid-template-columns和grid-template-areas；toggle收缩应通过CSS变量控制列宽并配合overflow:hidden；IE11需降级为flex/float并避免使用fr、minmax等新特性。
grid-template-columns 用 fr 单位时侧边栏不收缩？
因为 fr 是“剩余空间分配单位”，不是固定宽度，它默认优先填满容器——哪怕你设成 1fr 3fr，只要内容撑开，侧边栏也会跟着伸展。真正想让它“可收缩”，得把侧边栏设为 minmax(0, 1fr) 或显式固定最大宽度。
-
minmax(0, 1fr)允许列压缩到 0（配合overflow: hidden可隐藏内容） - 直接写
250px或clamp(64px, 20vw, 280px)更可控，尤其适配移动端 - 别在
grid-template-columns里混用fr和auto，auto列会按内容定宽，容易破坏响应逻辑
用媒体查询切换 grid 列数时布局错乱？
常见现象是侧边栏突然跳到主内容下方、高度塌陷或出现横向滚动条——本质是父容器 display: grid 没重置 grid-template-areas 或列轨道定义不匹配。
- 必须同步更新
grid-template-columns和grid-template-areas，比如桌面端："sidebar main"，移动端改成："main" - 避免只改
grid-column而不调grid-template-columns，否则子项可能溢出网格容器 - 用
grid-auto-flow: dense有时能缓解错位，但它是“填空式”布局，可能打乱视觉顺序，慎用
侧边栏 toggle 收缩时内容被裁切或留白？
单纯靠 width: 0 或 visibility: hidden 不行——Grid 的轨道依然占位。得让 Grid 系统“感知不到”这列存在。
- 用 CSS 自定义属性控制列定义：比如
--sidebar-width: 260px，收缩时设为0，再在grid-template-columns中引用var(--sidebar-width) 1fr - 更稳妥的是用
grid-template-columns: 0 1fr+overflow: hidden，但需确保侧边栏子元素不触发最小宽度（如min-width: fit-content要重置） - 动画不能直接对
grid-template-columns做过渡（不支持），得用transform: scaleX(0)配合origin控制缩放中心
IE11 下 grid 响应式侧边栏完全失效？
IE11 的 Grid 实现是旧版规范（2012 draft），不支持 fr、minmax()、gap，连 grid-template-areas 都只认单引号字符串。
立即学习“前端免费学习笔记（深入）”；
- 必须用
@supports (display: grid)包裹现代写法，给 IE11 降级为float或flex - IE11 中
grid-column: 1 / -1会解析失败，得写成grid-column: 1 / 3这种明确数字 - 别依赖
subgrid或grid-template-rows: subgrid，所有浏览器都还不稳定，尤其响应式场景下极易崩溃
