模块嵌套须遵循“grid 定骨架、flex 管内部”分层约束，否则引发塌陷、媒体查询失效；grid 内禁用 float/inline-block，应统一用 justify-items/align-items 控制对齐；flex 子项需设 min-width 防压缩，语义标签不直设 display: grid，媒体查询应锚定类名而非标签名。
模块嵌套必须遵循“Grid 定骨架、Flex 管内部”的分层约束，否则容易出现子元素塌陷、媒体查询失效或响应断层。
为什么不能在 Grid 容器里直接用 float 或 inline-block
float 会脱离文档流，导致父级 grid 容器无法正确计算行高；inline-block 在小屏下易因空格/换行产生不可控间隙，且无法响应 grid-template-columns 的重排逻辑。现代布局中，这两者与 Grid 层级不兼容，属于遗留方案。
推荐做法：
- Grid 容器内所有直系子元素必须是
display: contents（慎用）或默认块级行为，不主动脱离流 - 若需对齐或分布，统一用
justify-items/align-items控制，而非子元素自设float - 已废弃的
float布局必须整体替换为 Flex 或 Grid 子容器
Flex 子模块嵌套时，flex-wrap 和 min-width 的配合要点
当一个 Flex 容器（如导航栏、卡片组）作为 Grid 区域内的子模块时，仅设 flex-wrap: wrap 不足以保证小屏换行——如果子项没有最小宽度约束，浏览器可能强行压缩至 0px。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键组合：
- 每个 Flex 子项应设
flex: 0 0 min(100%, 240px)或显式min-width: 240px，防止过度收缩 - Flex 容器本身加
gap: 0.5rem替代margin，避免媒体查询中重复覆盖 - 在
@media (max-width: 768px)中，优先改flex-direction: column，而非只调width
语义化标签与 CSS 布局层级的错位风险
HTML5 标签如 <header></header>、<main></main>、<aside></aside> 本身不带 display 属性，若直接设为 Grid 容器，其子元素（比如 <nav></nav>）若也设了 display: grid，就形成两层 Grid 嵌套。此时媒体查询若只作用于外层，内层结构可能完全不响应。
安全写法：
- 外层语义标签负责区域划分（如
grid-area: header），内部布局交由子<div class="nav-container"> 承担 <li>避免对 <code><main></main>直接设display: grid；改用<main><div class="layout-grid">...</div></main> - 所有媒体查询应锚定在具体类名上（如
.layout-grid），而非语义标签名，防止未来 HTML 结构微调导致样式断裂
最常被忽略的是：嵌套层级一旦超过两层（Grid → Flex → Flex），gap 和 justify-content 的传播行为就会变得不可预测，尤其在 Safari 16.6+ 和旧版 Chrome 中。建议用 display: contents 慎重扁平化中间层，或用 container-type: inline-size + @container 替代部分媒体查询。
