grid-template-areas是复杂网格布局的最佳实践，因其以字符串定义可读、可查、可批量调整的布局地图，替代易错的手动行列定位，并支持响应式重排与轻量嵌套。
直接用 grid-template-areas 定义主栏和侧边栏区域，是最清晰、最易维护的方式；别硬套 grid-column 手动计算起止线。
为什么优先选 grid-template-areas 而不是纯行列数值
语义一目了然，改布局不用算列号；HTML 结构完全自由，不依赖元素顺序；媒体查询切换响应式时，只需重写模板字符串，不碰子元素的 grid-area 值。
常见错误是先写好 HTML 再强行用 grid-column: 1 / -1 拉伸，结果小屏下侧边栏卡在中间、无法下移。
-
grid-template-areas必须配合grid-area使用，否则区域名无效 - 每个引号内单词数必须等于
grid-template-columns的列数，否则整行失效 - 空格分隔不同区域，点号
.表示空白格（比如想留白或跳过某格）
grid-template-areas 在 PC 和移动端的写法差异
PC 端典型两栏：侧边栏固定宽、主内容自适应；移动端需让侧边栏沉底，避免窄屏横向溢出。
关键不是“怎么写”，而是“怎么切”。下面这段代码能直接复制进项目：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
注意：grid-template-rows 在媒体查询里没重写，会继承 PC 端值——但实际生效的是 grid-template-areas 新定义的四行结构，旧 grid-template-rows 自动被忽略。
侧边栏固定宽度但内容撑开怎么办
这是 grid-template-columns: 240px 1fr 最常被误用的地方：240px 是“最小轨道尺寸”，不是“最大”；如果侧边栏里塞了个 300px 宽的广告图，它真会把整列撑到 300px，主内容被压缩。
解决方法只有两个，且必须二选一：
- 给侧边栏内部加
overflow: hidden或max-width: 100%，强制内容不突破容器 - 把
240px改成minmax(0, 240px)，让 Grid 允许该列收缩（尤其当内容含长单词或未断行文本时）
别用 width: 240px 直接设在侧边栏上——Grid 已接管尺寸控制，这种写法会被忽略或引发冲突。
暗色模式 + 主次分栏的兼容要点
Grid 本身不参与颜色逻辑，但容易忽略的是：侧边栏和主内容区通常需要独立配色（比如侧边栏深灰、主内容浅灰），而 prefs-color-scheme 只能全局监听。
推荐做法是把主题变量定义在 :root，再用 grid-area 名作为 CSS 类前缀做局部覆盖：
@media (prefers-color-scheme: dark) {
:root {
--bg-main: #1e1e1e;
--bg-sidebar: #2d2d2d;
}
.sidebar { background-color: var(--bg-sidebar); }
.main { background-color: var(--bg-main); }
}
真正容易翻车的是字体缩放：如果用了 rem 单位统一缩放，但侧边栏菜单用了固定 px 行高，暗色模式下文字可能贴边或截断——所有尺寸单位得保持一致策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
