CSS Modules配合data-app-id属性隔离是解决微前端Grid样式冲突的根本方案，需同时启用类名哈希化与容器作用域限定，并为CSS变量添加应用前缀。
Grid 布局类名重复导致渲染错乱
微前端中 Grid 样式冲突不是“布局失效”，而是多个子应用定义了同名 grid-template-areas、grid-column 或自定义 grid 类（如 .layout-main），后加载的子应用 CSS 覆盖前者的声明，造成网格区域塌陷、列宽错位、甚至内容重叠。典型现象是：主应用网格正常，子应用加载后，主应用侧边栏突然被挤到顶部——DevTools 里能看到两个 .layout-main 规则并存，但生效的是后注入的那个。
CSS Modules 是最直接有效的解法
靠人工约定 .order-mgmt-grid 这类命名无法兜底，尤其当团队引入第三方 Grid 工具库（如 grid-styled）或复用旧组件时。必须让构建工具强制作用域化：
- Webpack 项目：在
css-loader配置中启用modules: { mode: 'local' }，确保所有.grid类编译为类似_grid_abc123的唯一哈希名 - Vite 项目：设置
css.modules.generateScopedName，例如[name]__[local]___[hash:base64:5]，避免不同子应用同名文件生成相同哈希 - 禁用全局
@import或import 'xxx.css'引入 Grid 工具类；若必须用，改用import styles from 'xxx.module.css'方式消费
Grid 容器必须加属性隔离前缀
仅靠类名哈希还不够——CSS Grid 的 grid-area、grid-template-areas 等声明依赖字符串匹配，而字符串本身不会被 CSS Modules 处理。所以容器节点必须携带可识别的上下文标识：
- 子应用挂载时，给根容器添加唯一
data-app-id属性，例如<div id="subapp-order" data-app-id="order-mgmt"> - 所有 Grid 相关样式规则，显式限定作用域：
div[data-app-id="order-mgmt"] .layout-grid { display: grid; grid-template-areas: "header main"; } - 禁止在 JS 中动态写
element.style.gridTemplateAreas = "header main"，改为通过 class 切换（如element.className = "layout-grid layout-grid--order"）
避免使用全局 CSS 变量定义 Grid 结构
--grid-gap、--grid-columns 这类变量极易被跨应用覆盖，且覆盖后无法追溯来源。浏览器 DevTools 只显示最终计算值，你根本看不出是哪个子应用写的。
立即学习“前端免费学习笔记（深入）”；
- 所有 Grid 尺寸/区域变量必须带应用前缀，例如
--mf-order-grid-gap、--mf-user-grid-areas - 不推荐用 JS 注入：
document.documentElement.style.setProperty('--grid-gap', '16px')—— 这会污染全局，应改用container.style.setProperty('--mf-order-grid-gap', '16px') - 构建时用 PostCSS 插件（如
postcss-prefix-vars）自动补全前缀，防止漏写
真正难处理的不是 Grid 类名，而是那些看似无害的 grid-area: header 字符串——它不经过任何 loader 处理，却决定整个布局是否崩塌。所以必须把容器属性前缀和 CSS Modules 同时落地，缺一不可。
