用 grid-template-areas 配合 @media 切换区域顺序是最直接可靠的方式，因其显式声明布局结构，能语义化切换流向，避免 grid-column 导致的重叠或溢出问题。
用 grid-template-areas 配合 @media 切换区域顺序，是最直接、最不容易出错的方式；别碰 grid-column 硬调位置，也别指望 grid-template-columns 加 transition 能折叠动画。
为什么必须用 grid-template-areas 而不是 grid-column
侧边导航在桌面端是左右并列，在小屏下要变成上下堆叠——这不是“某个元素往哪列放”的问题，而是整个布局流向的语义切换。grid-column 只控制单个元素落在哪几列，无法让浏览器重排其他项的位置。一旦你在媒体查询里改 .sidebar { grid-column: 1 / -1; }，而 .main 还卡在 grid-column: 2，它大概率被挤出视口或重叠。
而 grid-template-areas 显式声明结构："sidebar main" 表示一行两列横向排列；小屏下改成 "main" "sidebar"（两行一列），浏览器立刻按新模板重绘，不依赖内容高度、不触发浮动清理、也不怕子元素 min-height 撑高。
-
grid-area值必须和grid-template-areas中的字符串完全一致（大小写、空格、引号都不能错） - 所有行的列数要对齐：不能一行写
"header sidebar main"，下一行只写"footer"，否则整条规则失效 - 别在子元素上再写
grid-column或grid-row，它们会覆盖grid-area的定位
grid-template-columns 该设固定值、minmax() 还是 clamp()
侧边栏宽度不是越“灵活”越好，关键看内容是否可变：240px 1fr 适合图标+短文字的极简导航；但若菜单含中英文混排、多级箭头或动态加载标签，固定值容易导致窄屏文字强制换行、图标错位。
推荐优先用 minmax(240px, 280px) 1fr：最小保 240px（保障基本可读性），最大不超 280px（防宽屏拉得太开、留白失控）。注意别写 240px auto——auto 在 Grid 中不是“剩余空间”，它只按内容宽度收缩，主内容区可能只剩一个字宽。
- 需要兼顾 iPad 横屏和移动端缩放？可用
clamp(240px, 15vw, 280px) 1fr，比纯vw更安全（clamp()在 Safari 15.4+ 支持良好） - 旧版 Safari（iOS 13 以下）兼容需求强？降级用
fit-content(240px) 1fr - 主内容区别套
minmax()，除非你真需要限制最小宽度；否则反而破坏1fr的弹性分配逻辑
如何实现平滑折叠动画？grid-template-columns 不行
直接给 grid-template-columns 加 transition: grid-template-columns 0.3s 是无效的——fr 和 minmax() 都是比率/函数单位，浏览器无法插值计算中间帧。这不是 bug，是 CSS Grid 规范明确不支持的。
真正能动画的是 width、transform、opacity 这类属性。把折叠逻辑从 Grid 容器移到侧边栏自身：.sidebar 始终占一列，靠自身 width 变化来收放视觉区域。
- Grid 容器设
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr)（确保轨道不塌缩） -
.sidebar设width: 240px（展开）或width: 0（折叠），并强制加min-width: 0（否则内部 flex 或文本会撑开容器） - 必须加
overflow: hidden（防止内容溢出、滚动条残留、点击区域仍存在） - 动画用
transition: width 0.25s ease-in-out，立刻生效
小屏下隐藏侧边栏时，display: none 是关键
光在媒体查询里把 grid-template-columns 改成 1fr 不够——.sidebar 的 DOM 还在网格里占位，可能被挤进第一列，撑高容器或遮挡内容。必须同步让它退出布局流。
最简做法：@media (max-width: 768px) { .sidebar { display: none; } }。注意不是 visibility: hidden（仍占位），也不是 opacity: 0（仍可交互）。
- 如果要做抽屉式滑出，就别用
display: none，改用transform: translateX(-100%)+position: fixed，并确保z-index足够高 - 检查 DevTools 的 “Computed” 面板，确认生效的
grid-template-columns真的是1fr，而不是被更具体的选择器覆盖了 - 侧边栏高度不随页面滚动？大概率是父容器没撑开——比如用了
height: 100vh却没设min-height，或者body有默认margin导致布局塌陷
真正容易被忽略的点：所有断点单位必须统一（全用 max-width 或全用 min-width），混用会导致 768–768.99px 区间出现“半切换”状态；另外，grid-template-areas 的字符串匹配极其严格，一个空格不对，整个布局就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
