侧边栏在小屏上被挤到下方，应使用grid-template-areas配合@media切换布局：桌面端设"sidebar main"，小屏改写为"main""sidebar"实现垂直堆叠；避免width+float或grid-column:1/-1等破坏语义的做法，推荐grid-template-columns:250px 1fr或minmax(250px,300px)，并统一断点单位与box-sizing。
侧边栏在小屏上被挤到下方？用 grid-template-areas + @media 切布局
Grid 实现响应式侧边栏，核心不是靠 flex-wrap 或 JS 计算，而是用 grid-template-areas 定义语义区域，再配合媒体查询切换模板。小屏时把 "sidebar main" 改成 "main" "sidebar"，浏览器自动重排，不依赖内容高度或浮动清理。
常见错误是直接对 aside 设 width: 200px + float: left，结果小屏溢出或换行错乱；或者用 grid-column: 1 / -1 强制占满，反而破坏结构语义。
- 定义容器为
display: grid，并设grid-template-areas（如"sidebar main"） - 给子元素加
grid-area（如sidebar、main），名称必须和模板中一致 - 在
@media (max-width: 768px)里重写grid-template-areas，改成垂直顺序 - 避免在子元素上设
grid-column或grid-row，否则会覆盖grid-area的定位
grid-template-columns 该用 fr 还是 minmax()？
固定宽度侧边栏（如 250px）+ 自适应主内容区，推荐 grid-template-columns: 250px 1fr；但若侧边栏内容可能变宽（比如带长标签的导航），就得用 minmax(250px, 300px) 防止撑破容器。
错误做法是写 grid-template-columns: 250px auto —— auto 在 Grid 中不等于“剩余空间”，它只按内容宽收缩，主内容区可能窄得只剩一个字。
-
1fr表示等分剩余可用空间，适合主内容区 -
minmax(250px, 300px)保证侧边栏最小 250px，最大不超过 300px，超出部分滚动 - 如果要支持多端，可结合
clamp()：如clamp(240px, 15vw, 300px)，比纯vw更安全
为什么 grid-auto-flow: dense 不能解决侧边栏错位？
有人遇到侧边栏在中屏下突然跳到第二行，以为是 Grid 流向问题，加了 grid-auto-flow: dense，结果更乱——这个属性只影响**未指定位置的隐式网格项**，而侧边栏通常已通过 grid-area 或 grid-column 显式定位，dense 完全不生效。
真正原因往往是媒体查询断点没对齐，比如 CSS 中写了 @media (max-width: 768px)，但设计稿要求 769px 才切布局，导致 768–768.99px 区间出现“半切换”状态。
- 检查所有断点是否统一用
max-width或min-width，别混用 - 用浏览器开发者工具的“设备调试”功能，拖动宽度观察布局切换临界点
- 侧边栏错位更常因父容器
padding或box-sizing不一致导致，优先查这些
移动端真需要隐藏侧边栏？不如用 visibility: hidden + grid-area 占位
很多方案一进小屏就 display: none 侧边栏，结果主内容区突然变宽、页面跳动。更好的做法是保留 DOM 结构，用 visibility: hidden 并配合 grid-area 维持原有网格位置，这样过渡平滑，也利于屏幕阅读器理解结构。
如果确实要完全移除（比如节省渲染开销），请确保 JS 控制显示/隐藏时同步更新 grid-template-areas，否则残留的 grid-area 名称会导致布局错乱。
-
visibility: hidden仍占布局空间，不影响 Grid 网格线计算 - 搭配
opacity: 0和pointer-events: none可实现视觉隐藏+交互禁用 - 慎用
display: none：它会让元素脱离网格流，父容器的grid-template-areas必须同步删掉对应区域名
grid-gap 在不同断点下的单位一致性——用 px 在小屏会显得间隙过大，改用 rem 或 clamp() 才能自然缩放。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
