桌面端用 grid-template-areas 定义 header/nav/main/sidebar/footer 三行布局，平板窄屏隐藏 sidebar 改为两栏，手机端进一步简化为 header/main/footer 单列；主内容区用 minmax(200px,auto) 和 calc(100vh-80px) 保障弹性高度；侧边栏宽度改用 minmax(280px,35vw) 替代固定像素。
用 grid-template-areas 定义语义化区域结构
后台页面通常有固定区块：顶部导航、左侧菜单、主内容区、右侧面板（可选）、底部状态栏。直接写 grid-template-areas 比纯行列索引更易维护，也方便后续媒体查询切换布局。
常见错误是把所有区域硬编码成 5 行 1 列，结果在小屏下垂直堆叠过长、滚动失控。正确做法是先定义桌面端区域，再用媒体查询重定义小屏结构：
/* 桌面端 */
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 240px 1fr 320px;
}
<p>/<em> 平板窄屏：隐藏右侧面板，三栏变两栏 </em>/
@media (max-width: 1024px) {
.container {
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 240px 1fr;
}
}</p><p>/<em> 手机：菜单收起为汉堡，主内容全宽 </em>/
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
}
/<em> 此时 nav 应设为 hidden 或用 JS 控制显示 </em>/
}</p>
grid-auto-rows 和 minmax() 控制内容区高度弹性
后台页面主内容区常含动态表格或图表，高度不可预知。若只设 1fr，遇到空数据或超长列表时容易撑爆容器或留白过多。
推荐组合：grid-auto-rows: minmax(200px, auto) + 显式设置 main 区域的 min-height：
-
minmax(200px, auto)确保每行至少 200px，但允许内容撑高 - 给
main加min-height: calc(100vh - 80px)（减去 header + footer 高度），避免内容少时页面塌陷 - 避免对
main设固定height，否则内部滚动会和外层冲突
侧边栏宽度适配：用 fr 单位 + minmax() 而非固定像素
固定 320px 的右侧面板在小屏上太占空间，但完全隐藏又损失功能。折中方案是让其宽度随视口变化：
不推荐写法：grid-template-columns: 240px 1fr 320px
推荐写法：grid-template-columns: 240px 1fr minmax(280px, 35vw)
-
minmax(280px, 35vw)表示最小 280px，最大不超过视口宽度 35%，兼顾可读性与空间利用率 - 当 viewport 宽 35vw 自动收缩，比固定值更友好
- 注意：Safari 对
minmax()在grid-template-columns中的支持从 v16.4 起才稳定，旧版需加-webkit-前缀
避免 overflow: hidden 导致工具提示/弹窗被裁切
后台常用 Tooltip、Dropdown、Modal，若父容器设了 overflow: hidden（尤其在 nav 或 main 上），这些浮层会被截断。
Grid 布局本身不触发溢出裁切，问题往往出在人为添加的限制：
- 检查是否给
.container或任意 grid item 加了overflow: hidden—— 后台布局中绝大多数情况不需要 - 若必须限制某区域滚动（如固定高度日志列表），请仅对该子容器设
overflow-y: auto，且确保其position: relative - 浮层类组件（如
Popover）应挂载到body下，而非 grid item 内部，避开层级和裁切问题
最常被忽略的是：用 display: grid 后习惯性给整个页面 wrapper 加 overflow: hidden 来“清浮动”——Grid 不需要这个，加了反而坏事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
