CSS Grid 是仪表盘分栏唯一可靠方案，核心用 grid-template-columns: 240px 1fr 320px 定义三栏结构，响应式用 minmax() 和 2–3 个对齐设计稿的断点，表格需外层 overflow-x: auto 包裹，折叠用 grid-template-areas 切换并持久化状态。
用 grid-template-columns 定义主干结构，别碰 float 或 table
仪表盘分栏必须用 CSS Grid，不是“推荐”，是事实上的唯一可靠方案。float 在窄屏下会掉行、塌陷，table 做布局语义错误且无法响应；flex 虽可用，但多栏错位风险高，尤其当某栏内容高度突变时，容易撑乱整体节奏。
核心写法就是一句：grid-template-columns: 240px 1fr 320px——左侧菜单固定，中间主区自适应，右侧侧边栏（如实时指标卡）设为固定宽或 minmax(280px, 1fr)。注意：所有栏宽单位要统一逻辑，别混用 px 和 %，否则媒体查询里容易冲突。
-
1fr不等于100%，它吃的是剩余空间，不是父容器全宽 - 如果右侧要支持折叠，别直接改
grid-template-columns，用grid-template-areas配合 JS 切换更稳 - 别在 Grid 容器上再套 Flex 子项做对齐（比如给中间区加
display: flex; align-items: center），调试时根本分不清是 Grid 轨道还是 Flex 主轴在起作用
响应式断点只设 2–3 个，用 minmax() 替代硬切
仪表盘不是博客，不需要从手机到 4K 屏都精细适配。真实场景中，你只需管住三档：max-width: 768px（平板竖屏）、max-width: 1024px（小屏笔记本）、min-width: 1440px（大屏办公）。其他中间尺寸靠 minmax() 自动过渡。
例如主内容区写成 minmax(600px, 2fr)，既保证窄屏下不压缩到看不见按钮，又让宽屏时能拉伸吃满空间。比写一堆 @media (max-width: 900px) { grid-template-columns: 1fr; } 更轻量、更易维护。
立即学习“前端免费学习笔记（深入）”；
- 所有断点值必须和设计稿对齐，别凭感觉写
767px或1023px——Chrome DevTools 的设备模拟器里拖一拖就能验证 - 别用
grid-template-rows控制高度，仪表盘纵向滚动是常态，强行设高会导致内容被裁或出现双滚动条 - 移动端真要并排？放弃。直接切单列流式布局，用
grid-template-columns: 1fr+gap: 1rem，比强行压两栏强得多
overflow-x: auto 必须包在表格外层，否则宽数据直接截断
仪表盘常嵌表格（如日志列表、API 调用统计），但 <table> 本身不响应宽度限制。常见错误是给 <code><table> 设 <code>width: 100%，结果在小屏上文字挤成一团、横向滚动失效。
正确做法：用一个 <div> 包住 <code><table>，并设 <code>overflow-x: auto 和 min-width: 0（防 Safari 下 overflow 失效）。同时确保 <thead> 和 <code><tbody> 显式存在，否则表头在滚动时无法固定。<ul><li>所有 <code><th> 必须加 <code>scope="col"，不然读屏软件不知道它对应哪列
rowspan，安卓 WebView 渲染错位率在 >2 行时明显上升<table>，用外层 Grid 或 Flex 控制布局<h3>折叠侧边栏的 JS 控制点不在宽度，而在 <code>grid-template-areas
用户点击收起按钮时，别用 JS 改 style.gridColumn 或 width，那会破坏 Grid 布局上下文。真正可控的方式是预定义两套 grid-template-areas：
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer"; <p>/<em> 折叠后 </em>/ grid-template-areas: "header header" "main main" "footer footer";
然后用 JS 切换 class 触发重绘。这样左侧 <nav></nav> 消失后，main 自动占满整行，无需手动计算宽度、也不影响子元素 flex 行为。
- 切换时加
transition: grid-template-areas 0.2s无效，Grid area 变更不触发过渡，得用transform: scaleX(0)配合 visibility 控制视觉收起 - 折叠状态必须同步存到 localStorage，刷新页面后保持一致，否则用户会觉得“点了没反应”
- 别用
display: none隐藏导航栏——它会让 Grid 轨道消失，导致整个布局重排，动画卡顿
实际最易忽略的，是 box-sizing: border-box 没全局设。一旦某栏加了 padding: 1rem 又忘了这句，240px 就真变成 256px，右侧立刻溢出滚动条。这不是 bug，是盒模型本该如此。
