CSS Subgrid：子网格布局与组件化实践

概述Subgrid 允许子网格继承父网格的轨道定义，从而在嵌套布局中保持行列对齐。适用于复杂组件在页面整体栅格中的一致排版。用法/示例.page { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto auto 1fr; gap: 16px; } .card-list { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } 工程建议仅在需要与父网格对齐的嵌套场景使用 subgrid，避免过度依赖导致结构复杂化。对不支持的浏览器提供降级（如将子网格改为独立网格并手动对齐）。明确整体栅格语义与间距，减少组件内临时对齐规则。参考与验证MDN：Subgrid — https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgridweb.dev：Subgrid — https://web.dev/articles/css-subgrid