侧边栏不收缩因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 或列轨道定义不匹配。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须同步更新 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，所有浏览器都还不稳定，尤其响应式场景下极易崩溃

CSS Grid 做响应式侧边栏，关键不在“怎么写”，而在“哪一层做控制”：列宽定义要和媒体查询、状态切换、浏览器兼容三者对齐。漏掉任意一环，收缩就变成抽搐。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！