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…

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…

AI 摘要：本文作者 Ahmad Shadeed 通过一个常见的「版块布局」案例，展示了如何应用现代 CSS 技术（包括 :has()、container query、style query、clamp()、cqw 单位与 display: contents 等）解决传统响应式设计中无法灵活检测状态、复杂媒体查询以及无流畅排版的问题。文章从基础布局入手，逐步迭代到智能响应的组件结构，并探讨了 Safari 实验性支持的 random() 随机函数，以展现 CSS 的动态潜力。

Ishadeed

Solved By Modern CSS: Section Layout

Building a typical section design with modern CSS.

AI 摘要：这篇文章系统梳理了 CSS 中各种布局（Grid、Flexbox、Block、绝对定位等）的对齐机制，总结了 -content、-items、*-self 等属性在不同语境下的行为逻辑，重点在于区分 内容层级 (content level) 与 项目层级 (item level) 的对齐方式。文章核心思想是：对齐总和尺寸 (sizing) 与剩余空间 (free space) 的关系密不可分，不同布局模型下默认值和可用属性会有所不同，理解其背后的逻辑远比记忆“如何写出居中”更重要。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. Alignment 理论
• CSS 对齐有两个层次：content level（容器内整体内容）、item level（单个元素）。
• 三类主要属性：place-content / place-items（全局），place-self（单个元素）。
• 属性分为两大轴向：align-（垂直/交叉轴），justify-（水平/主轴）。
• 对齐效果依赖剩余空间是否存在，“normal” 默认等同于 stretch。

2. Grid Container
• content 概念在 Grid 对应 grid cells，item 对应 grid items。
• -content 控制网格单元整体在容器内的分布；-self 控制 item 在单元格内对齐。
• auto 与 1fr 表现不同：auto 利用对齐缩放元素；1fr 会占满剩余空间导致无对齐空间。
• 元素跨多格时，对齐发生在其 grid area 内。

3. Flexbox Container
• 与 Grid 相比更复杂；main axis 与 cross axis 的切换是难点。
• 横向（默认 row 模式）：只有 content level 对齐，使用 justify-content。
• 纵向：存在 content 和 item 两级对齐，align-items / align-self 针对单个 item。
• flex-wrap 决定是否启用纵向 content 对齐；flex-grow 消耗剩余空间，可能使对齐无效。
• 改变 flex-direction 会交换主/交叉轴，导致属性在不同维度表现不同。

4. Block Container 与 Inline 元素
• Block 布局默认垂直堆叠：垂直轴只有 content level 对齐，水平轴有 item level 对齐 (justify-self)。
• Inline 元素的对齐靠 text-align，不是 CSS Alignment 模块。
• 内联+块元素混合时，浏览器会生成 anonymous block boxes 来容纳内联元素，但这些匿名盒不能直接对齐。

5. auto margins
• margin: auto 本质是将剩余空间转换为 margin，因此其视觉效果类似居中。
• 区别在于 place-self: center 保留空隙，而 auto margin 会填满空间。
• 在 Flexbox 主轴上 auto margin 始终生效，甚至在没有 item-level 对齐的场景下。

6. 绝对定位元素
• 对齐基于 containing block 或 inset-modified containing block(IMCB)。
• 可通过 place-self 直接居中，替代传统的 top:50% + transform 技巧。
• margin: auto 亦可应用，但需显式指定 width/height。

7. Safe Alignment
• 当内容溢出 (negative free space) 时，safe 关键词可避免内容被裁剪到不可见区域。
• 如 justify-self: safe center，可保证在可滚动环境不导致内容不可到达。
• auto margin 天然是安全的，因为只考虑正向剩余空间。

Css-Tip

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!

AI 摘要：本文深入探讨了CSS中高度设置的问题，揭示了为什么百分比高度有时不起作用，并提供了解决这些问题的有效方法。文章详细解释了CSS中宽度和高度计算的本质差异，并介绍了使用Flexbox和Grid布局来解决高度设置难题的策略。

• 引言：作者分享了自己学习CSS初期对高度设置问题的困惑，并指出理解背后的机制是解决问题的关键。

• 循环计算
• 解释了 CSS 中宽度和高度计算的根本区别：宽度基于父元素计算，而高度基于子元素。
• 描述了当子元素尝试设置百分比高度时，父子元素之间形成循环计算的问题，导致浏览器忽略百分比高度声明。

• 可知的高度
• 介绍了通过为父元素设置明确高度（如px或rem单位）来打破循环计算的方法。
• 展示了如何使用 rem 单位替代 px 单位，以提升布局的可访问性。
• 讨论了如何在嵌套元素中使用百分比高度，只要它们基于一个明确的尺寸。

• 从顶到底的百分比
• 探讨了在顶级 html 元素上设置百分比高度的效果，并解释了 html 元素的特殊性。
• 提到过去使用百分比高度确保布局填充整个视口的方法，以及现在使用 svh 单位的替代方案。

• 最终挑战
• 分析了使用固定高度（如 24rem ）可能导致内容溢出的问题。
• 展示了使用 min-height 替代 height 的尝试，但指出这仍然不能解决百分比高度的问题，因为 min-height 并不提供固定尺寸。

• 解决方案
• 介绍了使用 Flexbox 和Grid布局来解决高度设置问题的方法。
• 解释了如何通过设置 display: grid 或 display: flex 来创建新的格式化上下文，使子元素自动填充父容器。
• 提供了使用 Flexbox 和 Grid 的具体代码示例，并解释了它们的布局机制。

Joshwcomeau

The Height Enigma • Josh W. Comeau

One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting height: 100% would have no effect at all. When I finally figured out what was going on,…