grid-template-areas 是最可靠、语义最清晰的响应式侧边菜单实现方式，因其能显式声明区域关系并自动重排网格流，而 grid-column 仅控制单项列位置，无法改变整体布局流向。
直接用 grid-template-areas 配合 @media 切换语义区域顺序，是最可靠、语义最清晰的响应式侧边菜单实现方式；别用 grid-column 或 width + float 硬调位置，否则小屏下极易错位或撑破容器。
为什么必须用 grid-template-areas 而不是 grid-column
侧边菜单需要在桌面端横向并列、小屏端垂直堆叠，本质是“区域顺序变化”，不是“列轨道调整”。grid-column 只控制某一项落在哪几列，无法改变整体布局流向；而 grid-template-areas 显式声明区域关系（如 "sidebar main"），浏览器能据此自动重排整个网格流。
- 常见错误：给
.sidebar写grid-column: 1，再在媒体查询里改成grid-column: 1 / -1——这会让侧边栏强行占满单列，但主内容区若还卡在grid-column: 2，就会被挤出视口或重叠 -
grid-template-areas必须和子元素的grid-area值严格匹配，大小写、空格、引号都不能错 - 桌面端写
grid-template-areas: "sidebar main"，小屏改写为grid-template-areas: "main" "sidebar"，浏览器立刻按新模板重绘，不依赖内容高度或浮动清理
grid-template-columns 中该用 240px 1fr 还是 minmax(240px, 280px) 1fr
固定宽度（如 240px）适合图标+短文字的简洁导航；若菜单含长标签、多级箭头或需适配中文字号变化，必须用 minmax() 设弹性边界，否则窄屏下文字强制换行、图标错位。
-
minmax(240px, 280px)表示侧边栏最小 240px（保基本可读性），最大不超过 280px（防宽屏拉得太开） - 避免写
240px auto——auto在 Grid 中不等于“剩余空间”，它只按内容宽度收缩，主内容区可能只剩一个字宽 - 如果要兼顾移动端缩放和横屏 iPad，可用
clamp(240px, 15vw, 280px)，比纯vw更安全（clamp()在 Safari 15.4+ 支持良好）
小屏下隐藏侧边菜单时，display: none 是唯一安全选项
仅改 grid-template-columns: 1fr 不够——侧边栏 DOM 仍在网格中，会被隐式分配到第一列，可能撑高容器、遮挡内容，甚至触发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
- 必须同步加
.sidebar { display: none; }，彻底移除渲染占位 - 别用
visibility: hidden或opacity: 0：前者仍参与布局计算，后者仍可聚焦、响应点击，对键盘导航和屏幕阅读器都不友好 - 如果要做滑出动画（比如汉堡菜单唤出），就不要
display: none，改用position: fixed+transform: translateX(-100%)，并确保父容器设了overflow: hidden
嵌套子菜单时，每级容器都必须显式声明 display: grid
Grid 不会隐式继承上下文。一级菜单设了 display: grid，二级子菜单若没单独声明，grid-column 或 grid-area 规则完全无效，子项会堆在左上角。
- 一级容器：
.sidebar { display: grid; grid-template-columns: 240px; } - 每个可展开项需包裹
<div class="submenu-wrapper">，并设display: grid - 子菜单本身（
.submenu）也必须写display: grid，才能用grid-column: 2横向铺开 - 小屏下统一用
@media (max-width: 767px) { .submenu { display: none; } }，而不是只调grid-column，否则隐藏的 DOM 仍影响焦点流和滚动
真正容易被忽略的是：所有断点单位必须统一（全用 max-width 或全用 min-width），混用会导致 768–768.99px 区间出现“半切换”状态——侧边栏部分显示、部分隐藏，布局瞬间错乱。用浏览器 DevTools 的“设备调试”拖动宽度实时验证，比凭经验写断点靠谱得多。
