用 display: grid 布局管理后台主容器最直接，应仅对顶层功能分区使用 grid-template-areas 划分区域，子模块各自用 Flex 或独立 Grid，避免全页塞入一个 Grid 导致冲突。
用 display: grid 做管理后台主容器布局最直接
管理后台页面通常有固定功能区：顶部导航、左侧菜单、右上操作栏、中间数据表格、底部状态栏等。把这些区域硬塞进 float 或靠一堆 div + margin 推来推去，后期加个筛选条件或导出按钮就容易错位。直接用 display: grid 定义主容器，配合 grid-template-areas 命名区块，结构一眼可读，响应式切换也只需改一行媒体查询。
常见错误是把整个页面所有内容都扔进一个大 Grid 容器——比如把 8 张业务表格、侧边栏的折叠菜单、弹窗表单全塞进去，结果 grid-area 冲突、z-index 混乱、打印样式失效。应该只对「顶层功能分区」用 Grid，子模块（如单张表格、表单组）各自用 Flex 或独立 Grid。
- 主容器设
display: grid，用grid-template-areas明确划分："header header header" "nav main main" "nav footer footer" - 每个子元素必须带
grid-area属性，值与grid-template-areas中名称严格一致（大小写、空格都不能错） - 行高列宽优先用
fr单位，避免像素值卡死；需要固定高度的区域（如顶部 header）单独设grid-template-rows: 60px 1fr auto - 移动端切单列时，重写
grid-template-areas为"header" "nav" "main" "footer"，别试图用grid-column: 1 / -1补救
grid-area 命名和拼写错误会导致区块消失
这不是浏览器 bug，是 CSS Grid 的严格匹配机制：如果某个子元素的 grid-area 值在父容器的 grid-template-areas 里找不到对应名称，它就会被挤到网格外（表现为“不见了”），且不报错、不警告。尤其容易发生在复制粘贴代码后漏改名称，或中英文引号混用（比如用了中文全角引号包裹字符串）。
调试时别只看 HTML 结构是否嵌套正确，要打开开发者工具的 Layout 面板，勾选 “Grid Overlay”，观察每个元素是否真的落在预期区域内。如果某块没显示，先检查控制台 Elements 标签页里该元素的 computed 样式中 grid-area 是否为空或 auto。
立即学习“前端免费学习笔记（深入）”；
- 命名只允许字母、数字、短横线（
-），不能有下划线、空格、中文 -
grid-template-areas中每行用引号包裹，多行之间用空格分隔，不是换行符 - 所有区域名必须在同一行内完整写出，不能折行；否则解析失败，整个声明作废
- 若某区域需跨多行或多列，不要重复写名字，而是用点（
.）占位，例如："header header header" "nav main main" "nav . ."
表格类模块别直接放 Grid 区域里，包一层 div 再设 width: 100%
管理后台里最常见的就是多个 <table> 并排或上下堆叠。如果直接把 <code><table> 当作 Grid 子项，会遇到两个问题：一是 <code><table> 默认 <code>display: table，在 Grid 容器中行为不可控（尤其 IE/Edge 旧版）；二是表格自身有内部尺寸逻辑（table-layout: auto 时宽度由内容撑开），和 Grid 的行列约束冲突，导致溢出或缩成一条线。
正确做法是让每个表格都包裹在一个 <div> 中，这个 <code><div> 才是 Grid 的直系子项，再给该 <code><div> 设 <code>width: 100%; height: 100%，表格本身设 width: 100% 即可填满。
- 不要写：
<main><table>...</table></main>（<main></main>是 Grid 子项） - 应该写：
<main><div class="table-wrapper"><table>...</table></div></main> -
.table-wrapper必须有overflow-x: auto，否则宽表格会撑破容器 - 如果表格要支持横向滚动，
<table> 外层 <code><div> 要设 <code>min-width: fit-content，否则滚动条不出现侧边栏折叠后 Grid 布局要重算，别只靠
visibility: hidden很多后台系统支持点击按钮收起左侧菜单栏。如果只是给
nav加visibility: hidden或opacity: 0，它的网格区域依然占位，main区域不会自动扩展——用户会觉得“空白变多了，但内容没变宽”。真正生效的方案是动态修改grid-template-areas和列宽定义。这不意味着每次都要手写 JS 拼字符串。可以用 CSS 自定义属性（
--sidebar-width）配合calc()控制列宽，再用grid-template-columns切换；更稳妥的是用两个预设的 Grid 模板类（如.layout-collapsed和.layout-expanded），JS 只负责切 class。- 折叠时移除
nav的grid-area，同时更新父容器的grid-template-areas，去掉对应列名 - 列宽不能写死，比如从
240px 1fr改为1fr，否则折叠后main还是窄的 - 别用
display: none隐藏nav后再用 JS 测量宽度——DOM 已脱离文档流，测不到真实值 - 动画过渡只能作用于
width或transform，Grid 模板切换本身不支持过渡，得靠其他属性补足视觉连贯性
min-height设置。后台页面常有“空数据占位图”，一旦表格没数据，main区域高度塌缩，整个页面变短，底部 footer 上浮。必须给主 Grid 容器设min-height: 100vh，且确保其父级（如）没有height: 100%类似限制，否则无效。 - 折叠时移除
