AI 摘要：文章深入浅出地介绍了 CSS Subgrid 的原理、语法以及在实际布局中的强大应用。作者从传统嵌套 Grid 布局的局限出发，展示 Subgrid 如何让子元素共享父网格结构，从而解决嵌套布局中兄弟元素协调、行列同步、可访问性与语义等长期难题。文末作者也提醒了 Subgrid 的坑点（如行空间保留、编号重置和不支持流式网格）及兼容性策略，最后展示了灵活采用 Subgrid 逐步优化布局的思路。

1. Subgrid 基础与语法逻辑
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套元素难以精确控制。
• Subgrid 允许共享父级 Grid 的行列定义，实现层级布局的连贯性。
• 示例演示如何让 <ul><li> 等语义化标签参与同一布局网格。
• 对比 Flexbox 及嵌套 Grid 的替代方案，指出 Subgrid 提升结构语义与简洁性。

2. 新布局可能性（New layout possibilities）
• 演示艺术作品集卡片布局中跨元素对齐的问题。
• Subgrid 能让兄弟卡片实现列宽一致、响应式调整，避免文字长度影响列宽。
• 动态响应内容变化，提高布局的自适应表现与一致性。

3. 使用 Subgrid 时的坑点与避坑指南（Subgrid Gotchas）
• 行空间保留(Row reservation)： 必须显式定义跨越行数，否则子网格会被压缩成单行。
• 网格线编号重置： Subgrid 继承父网格模板但重编号，索引从 1 重新开始。
• 不支持流式网格(Fluid grid)： auto-fill / auto-fit 等流体布局参数目前无法与 Subgrid 结合。
• 浏览器兼容性： 主流浏览器 2023 起支持，但覆盖率未达 90%，需提供 Fallback。

4. 向后兼容策略（Fallback for older browsers）
• 使用 @supports not (grid-template-columns: subgrid) 提供替代布局。
• 优先保证视觉与交互体验的一致性，而非强求原样重现。
• 建议在小规模组件中逐步应用 Subgrid。

5. 实战展示与结语
• 以 Stripe Developer 网站为典范，展示多层 Subgrid 嵌套布局的极限用法。
• 鼓励开发者从小范围、局部组件开始接入 Subgrid 改造。
• 强调 Subgrid 带来的语义与结构清晰性提升，呼吁更多实验与实践。

Joshwcomeau

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid…