css subgrid 通过让子网格复用父级轨道实现跨层级对齐，消除冗余 wrapper、扁平化 dom；需父容器明确定义轨道，子项设 subgrid 并直接锚定行列线，避免中间层和误用陷阱。
用 CSS Subgrid 优化复杂嵌套列表，核心是让子级网格“不自建轨道”，而是复用父级已定义的列/行线——这样既保证所有层级元素严格对齐同一套参考线，又省掉一层包裹容器。原始对齐逻辑常靠 margin、flex 嵌套或 JS 计算高度来强行拉齐，Subgrid 把这件事交给浏览器原生轨道系统，DOM 层级自然变扁。
用 subgrid 替代“对齐专用 wrapper”
常见错误：为让列表项内多个区块（如标题、摘要、操作栏）底部对齐，额外包一层 div 并设为 display: grid，再手动定义三行轨道。这增加 DOM 节点，且每项都重复计算轨道。
正确做法：父列表容器定义好行轨道（比如 grid-template-rows: auto minmax(60px, 1fr) auto），每个列表项直接设 display: grid + grid-template-rows: subgrid。它不创建新行，而是挂载到父轨道上，所有项的“摘要区”自动落在同一行区间内。
- 父容器定义
grid-template-rows和gap，明确划分内容区域高度基准 - 列表项不写任何
grid-template-rows，只写subgrid，继承父轨道 - 列表项内部子元素（如
.title、.body）用grid-row: 1、grid-row: 2直接锚定父轨道线，无需计算像素或百分比
取消“伪网格”中间层
有些布局为了在卡片内做两栏排版（如图标+文字），会把卡片内容再包一层 div class="card-content" 并设为 display: grid。这就是典型的非必要 DOM 层级。
只要父列表容器已定义列轨道（例如 grid-template-columns: 40px 1fr），卡片本身就可以作为子网格启用 grid-template-columns: subgrid，其子元素（图标、主文本）直接用 grid-column: 1 / grid-column: 2 对齐父列线。
- 删除
<div class="card-content"> 这类仅用于布局的 wrapper <li>卡片元素（<code>.card）同时承担内容容器和子网格双重角色 - 图标、标题等直系子元素成为子网格项，跳过中间层转发
- 父容器写
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 子网格写
grid-template-columns: subgrid，自动适配当前有效列数 - 子元素用
grid-column: span 2或grid-column: 1 / -1，行为在各断点下保持一致 - 确保父容器设置了
display: grid和显式的grid-template-columns/rows，不能依赖auto-fit却不设最小尺寸 - 子元素必须是父容器的**直接子元素**，如果中间隔了
display: contents或伪元素，subgrid 可能失效 - 不要给子网格同时设
grid-template-columns和subgrid，后者会覆盖前者；如需局部调整，改用grid-column-gap或justify-items
响应式下保持轨道语义一致
传统做法是在不同断点重写整个 grid-template-columns，导致子网格无法继承；而 Subgrid 要求父轨道定义稳定可继承。
解决方案：用 minmax() + repeat(auto-fit) 定义弹性列轨道，让父容器在不同宽度下仍输出“逻辑列数”，子网格始终能继承有意义的列线（而非具体像素值）。
避免误用 subgrid 的典型陷阱
Subgrid 不是万能胶。它只在子元素是直接网格项、且父容器已明确定义轨道时才生效。
