AI 摘要：本文通过多个实例（如艺术作品集和定价卡等）讲解了 CSS Subgrid 的基础概念、进阶用法与常见陷阱。Subgrid 允许嵌套元素继承父级网格结构，实现跨层级的布局一致性与响应性，从而简化复杂 UI 的构建。作者展示了它如何解决兄弟元素互不联动、语义化结构打破布局等老问题，并警示了行数预留、索引重置和兼容性等细节，同时提供了实用的 Fallback 策略。

1. Subgrid 基础与语义化改进
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套结构会破坏网格定位。
• Subgrid 通过继承父网格行列定义，让子元素（如 <ul><li>）复用父结构，从而保持语义化 HTML 与视觉布局同步。
• 基本用法：display: grid + grid-template-rows: subgrid + grid-template-columns: subgrid。
• 对比方案包括使用 Flexbox 嵌套 Grid，但 Subgrid 更能保持整体一致布局。

2. 新的布局可能性与动态响应
• 示例中展示了艺术作品卡片在不同屏幕下的两列布局问题，Subgrid 可让列宽动态适配内容。
• 通过共享父网格的列定义，兄弟 <article> 间可以互相影响，实现内容驱动的响应式调整。
• Subgrid 的计算方式可让布局在标题长度等内容变化时自动调整。
• 这种“跨组件感知”的能力是传统 CSS 无法实现的。

3. 实践陷阱（Gotchas）解析
• 行空间预留问题：Subgrid 默认只占一行，需明确声明 grid-row: span n 避免元素重叠。
• 索引重置：Subgrid 内行/列线号会重新编号，非父级的延续 ID。
• 流式网格不兼容：auto-fill, auto-fit 等自动列数写法与 Subgrid 不完全兼容，需要显式定义列。
• 旧版浏览器支持：截至 2025 年仍未达 90%，推荐通过 @supports 编写单列垂直 fallback 布局。

4. 实战与兼容性策略
• 用 Subgrid 搭建灵活的定价卡（Pricing Card）示例，实现不同卡片内容的行高完全对齐。
• 介绍 Feature Query (@supports) 实现优雅降级。
• 讨论如何平衡“视觉一致性”与“用户体验优化”；Fallback 不追求完美复刻，而是保持最佳体验。

5. 背景与应用前景
• Stripe Developer Site 是 Subgrid 的大型示范：多层 Subgrid 构建超大布局。
• 但作者更看重 Subgrid 在小范围 UI 调整、组件层布局优化的价值。
• 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…