应按语义角色（如banner、nav）而非视觉位置命名grid区域，用css自定义属性+minmax()管理列宽，显式定义固定区域行高、auto-rows用minmax(240px,max-content)，拖拽布局需通过数据层和class驱动而非内联样式。
Grid模板区域命名太随意，组件一换就错乱
用 grid-template-areas 写 Dashboard 时，很多人直接按视觉顺序起名，比如 "header sidebar main footer"，结果加个广告位或切换暗色模式时，整个区域定义得重写一遍。
真正省事的做法是按「语义角色」而非「视觉位置」命名：用 "banner nav content aside cta footer" 这类名字。这样即使把 aside 从右边挪到左边，或者在移动端收进抽屉，grid-area: aside 这行 CSS 完全不用动，只改 grid-template-areas 的字符串布局即可。
- 命名避免带方位词（如
left-sidebar），优先用功能词（tools,filters,stats） - 空格和点号都算有效字符，
" . filters . "中的.能占位又不渲染，比留空更安全 - 别在 JS 里动态拼接
grid-template-areas字符串——CSS Custom Properties 不支持该属性，只能靠style.gridTemplateAreas手动设，易出错
响应式断点里重复写 grid-template-columns，维护成本爆炸
为 PC、平板、手机各写一套 grid-template-columns: 250px 1fr 300px 这种硬编码，等于把布局逻辑锁死在媒体查询里。一旦某列宽度要微调，三个地方全得改。
更稳的方式是用 CSS 自定义属性 + minmax() 组合：定义 --sidebar-w: 250px，再用 grid-template-columns: var(--sidebar-w) 1fr minmax(280px, 35vw)。这样只需在媒体查询里改变量值，布局声明本身不动。
立即学习“前端免费学习笔记（深入）”；
-
minmax(280px, 35vw)比固定值更适合内容区，既保最小可读宽度，又防宽屏下拉得太开 - 别对
grid-column-start/end做响应式覆盖——它不继承，且容易和grid-area冲突，优先用grid-template-areas切换整行结构 - 移动端慎用
grid-auto-flow: column，它会让组件按列流式排列，但 Dashboard 组件通常有强垂直阅读顺序，容易打乱逻辑流
grid-auto-rows 设太小，卡片内容撑开后网格塌陷
Dashboard 里常有数据卡片，高度不固定。如果只设 grid-auto-rows: 200px，内容一超就溢出，下面的行被顶开，其他列对不齐——这不是 bug，是 grid-auto-rows 本就不控制已有轨道，只管新增行。
正确解法分两步：对已知区域用 grid-template-rows 显式定义（比如 header 和 footer）；对内容区用 grid-auto-rows: minmax(240px, max-content)，让每行至少 240px，又能随内容伸展。
-
max-content是关键，它让行高由内部最高子元素决定，不是由文字行高或 padding 决定 - 如果卡片内有异步加载内容，记得给
min-height占位，否则初始渲染时max-content算出来是 0 - Firefox 对
max-content在grid-auto-rows中的支持比 Chrome 晚几个版本，若需兼容旧版 Firefox，退阶用auto+ 子元素min-height
用 grid-column / grid-row 定位组件，跨区域拖拽时位置丢失
Dashboard 编辑模式下允许拖拽组件，JS 改的是 grid-column 和 grid-row，但用户一刷新页面，这些内联样式就没了——因为没存回 CSS 或没同步到 class。
真正在生产环境跑得稳的方案，是把位置信息存在数据层（比如组件配置数组），渲染时靠 class 名驱动布局。例如组件配了 { area: "stats", span: 2 }，就加 class grid-area-stats grid-span-2，对应 CSS 写 .grid-area-stats { grid-area: stats; } 和 .grid-span-2 { grid-column: span 2; }。
- 别用
grid-column: 2 / 4这种数字定位——它依赖绝对轨道数，加删一行就全偏移 - 拖拽库（如
@dnd-kit）返回的索引是视觉序号，转成 grid 区域名时，必须查表映射，不能简单area = `item-${index}` - 如果组件支持跨多行多列，
grid-row和grid-column必须成对出现，漏一个就会触发浏览器自动补默认值，导致错位
grid-area 值改错，整块布局就静默失效——还不好 debug。 
