Bootstrap 5 官方不提供开箱即用的 CSS Grid 栅格系统，标准版仍以 Flexbox 为底层；实现响应式侧边栏须绕过 .row/.col，改用独立容器配合 grid-template-areas 与媒体查询切换布局，并同步设 display: none 隐藏小屏侧边栏，避免占位干扰。
Bootstrap 5 官方不提供开箱即用的 CSS Grid 栅格系统——所谓“Grid 支持”仅限实验性配置或第三方扩展；标准发行版（含 5.3）仍以 Flexbox 为底层。想用 Grid 实现响应式侧边栏，必须绕过 .row/.col，手动写 Grid 规则，否则会和 Bootstrap 的弹性布局机制冲突。
为什么不能给 .row 加 .d-grid
常见错误是写 <div class="row d-grid"> 再配 grid-template-columns。这会导致：
• .col-6 等类仍按 Flex 渲染，宽度计算失控
• .row 的负外边距（margin-left: -0.5rem）被 display 变更破坏，子项塌缩、间距消失
• DOM 结构语义错乱，屏幕阅读器无法正确识别区域关系
真正可用的起点是独立容器，比如 <div class="dashboard-layout">，不套用任何 Bootstrap 栅格类
如何用 grid-template-areas 控制侧边栏位置
这是最稳妥的语义化方式，尤其适合管理后台类多区域布局：
• 外层容器设 display: grid 和 grid-template-areas: "sidebar main"
• 侧边栏元素加 grid-area: sidebar，主内容区加 grid-area: main
• 小屏时在 @media (max-width: 768px) 中重写为 grid-template-areas: "main" "sidebar"
• 必须同步加 .sidebar { display: none; }，否则它仍占网格轨道，可能挤高容器或遮挡内容
• 别在子元素上写 grid-column 或 grid-row，会覆盖 grid-area 定位
grid-template-columns 该用 fr 还是 minmax()
取决于侧边栏内容是否可变：
• 固定导航菜单（文字+图标），推荐 grid-template-columns: 240px 1fr
• 若含长标签、动态文本或国际化内容，改用 minmax(240px, 280px) 1fr，防止撑破容器
• 避免写 240px auto —— auto 在 Grid 中不是“剩余空间”，而是按内容宽收缩，主区域可能窄到只剩一行字
• 如需适配多端，可用 clamp(240px, 15vw, 280px)，比纯 vw 更抗极端缩放
如何与 Bootstrap 变量共存而不硬编码
Bootstrap 5 内置的 CSS 变量可直接复用，避免像素值散落：
• 用 gap: var(--bs-gutter-x) 对齐默认间距（通常为 1rem）
• 断点用 @media (min-width: var(--bs-breakpoint-md))，而非写死 768px
• 主内容区内嵌卡片 Grid 时，列定义写 repeat(auto-fill, minmax(280px, 1fr)))，并加 gap: var(--bs-gutter-x)
• 注意：这些变量只在 Bootstrap CSS 被加载后才生效，确保 <link> 在自定义样式前引入
立即学习“前端免费学习笔记（深入）”；
侧边栏一旦参与repeat(auto-fill, ...) 计算，小屏下就会被强行压窄——这是最常被忽略的结构性错误。真正要隔离的是“布局骨架”和“内容排列”：骨架用 grid-template-areas + 显式列宽，内容用内层 Grid 控制卡片流。 
