大屏数据看板需用 CSS Grid 优化布局稳定性与渲染性能：主内容区用 auto-fill + minmax(280px, 1fr) 控制列数，外层用 grid-template-areas 解耦功能区，表头冻结须物理拆分容器，断点响应需完整声明 display: grid 等属性。
大屏数据看板对布局稳定性、渲染性能和视觉一致性要求极高。用 CSS Grid 优化，核心不是堆功能，而是控制轨道生成逻辑、隔离关键区域、约束内容溢出，并让浏览器在高分辨率下仍能高效计算列数与间距。
主内容区用 auto-fill + minmax(280px, 1fr) 稳定分列
仪表盘卡片网格必须避免小屏拉宽、大屏列数失控。auto-fill 保留空轨道，确保每列始终满足最小宽度；minmax(280px, 1fr) 中的 280px 是实测底线——含 padding 和 border 后，文字可读、图标热区足够手指点击或触控笔操作。设成 200px 易导致换行混乱，设成 350px 则在 2K 横屏（如 2560px）下仅铺 7 列，空间浪费明显。
- 写法示例：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - 禁用固定 width：卡片内部子元素不设
width: 300px类固定值，否则破坏 fr 分配逻辑 - 搭配
gap: 1.25rem（大屏建议值），既保证呼吸感，又不过度吞空间
侧边栏、头部等区域必须与卡片网格解耦
导航栏、筛选器、标题栏等功能区若混入 repeat() 的列计算中，会被动态挤压——文字缩成一条线、菜单图标错位、时间选择器弹窗被截断。正确做法是外层用 grid-template-areas 显式划分语义区域，再让主内容区单独嵌套一层 Grid。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 外层容器定义区域：
grid-template-areas: "header header header" "nav main main" "nav footer footer" -
nav区域设grid-area: nav并独立控制宽度：grid-template-columns: 240px 1fr -
.main内部再启用卡片网格，不参与外层列数计算 - 避免在 nav 或 header 上叠加
display: flex，Safari iOS 16+ 及部分 Chromium 内核易触发渲染空白
防内容撑破 + 表头冻结需物理拆分
大屏常展示密集表格类数据，fr 单位不是“平均分”，而是按内容实际尺寸动态分配。某列含长文本或未压缩图片时，会吃掉大量空间，挤垮其他列。
立即学习“前端免费学习笔记（深入）”；
- 关键列加
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap - 金额列需小数点对齐：外层右对齐，内部再套一层 Grid，列定义为
grid-template-columns: 1fr max-content，把整数和小数部分分开控制 - 表头冻结不能靠
position: sticky在整个 Grid 容器内生效——必须物理拆分为.header-grid和.body-grid两个容器，父级设subgrid继承列宽（Safari 15.6+ 支持），旧版用 JS 同步宽度
断点响应要完整声明，不能只改列数
很多大屏看板在 1920px → 3840px 切换时出现错位，问题常出在媒体查询里只写了 grid-template-columns，却漏了 display: grid 或 grid-template-areas。浏览器最终 computed 样式里 display 若不是 grid，整个布局就退化为普通流。
- 每个断点内必须同时声明：
display: grid、grid-template-areas、grid-template-columns、grid-template-rows - 检查方式：打开开发者工具，看 Elements 面板中该元素的 Computed 标签页，确认
display值是否为grid - 推荐断点组合：
@media (min-width: 1920px)、@media (min-width: 2560px)、@media (min-width: 3840px)，逐级放宽卡片最小宽度（如 280px → 320px → 360px）
