#CSS 后兼容时代：2025 年起 Grid3、Subgrid、Container Queries、@layer 已成新 baseline，可直接用。
- 五大布局模型：Flow、Flexbox、Grid、Container Query、Intrinsic，各司其职。
- Subgrid 正式可用：子网格继承父网格轨道，一次性解决卡片对齐地狱。
- Container Queries 全面落地：组件按自身宽度响应，无需再绑死视口。
- @layer 正式版：显式层叠顺序，告别选择器权重内卷。
- Flexbox 默认支持 gap：row-gap / column-gap 无需 display:grid 也能优雅间距。
- 新关键字 safe/unsafe：align/justify-content 增加溢出保护。
- 四套现成无媒体查询模板：Holy Grail、自适应仪表板、多列文章、一行居中。
- DevTools 升级：Chrome 可视化 Subgrid，Firefox 仿真容器查询。
- 2026+ 在途功能：masonry、@when 条件规则、相对颜色语法。

https://2ality.com/2025/10/css-layout.html

2Ality

[Web dev for beginners] CSS layout: flexbox, grid, media queries and container queries

CSS provides a variety of services for web content: In the previous chapter, we used it to format content: to change colors, typefaces, etc. In this chapter, we will use it to lay out content: to place HTML elements on a page.