现代布局特性

现代布局把对齐、间距、内在尺寸和子网格关系直接写入布局模型。gap 可用于 Flexbox 和 Grid，subgrid 让子网格沿用父网格轨道，aspect-ratio 表达比例，min-content、max-content 和 fit-content 描述内容约束。

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tile { aspect-ratio: 4 / 3; }

这些特性仍受内容最小尺寸、书写模式和浏览器支持影响。subgrid 解决跨卡片对齐问题，不等于把所有嵌套布局自动合并；aspect-ratio 只提供比例约束，实际图片和内容仍可能溢出。

实验与练习

创建标题、正文高度不同的卡片网格，用 subgrid 对齐内部行，再移除它比较差异。给图片容器加入 aspect-ratio 并放入不同尺寸图片，记录裁剪、溢出和占位空间。

可运行微实验：能力检测与降级

先用 @supports 检测容器查询、cascade layers 或逻辑属性，再在支持与不支持路径提供同一内容的可用布局。用不同语言方向和不同容器宽度测试，记录哪些样式来自现代能力、哪些来自基础 CSS。

常见错误

• 把 aspect-ratio 当成自动裁剪。
• 认为 subgrid 会继承所有父级样式。
• 使用尚未支持的特性却没有回退布局。

继续阅读

下一篇从物理方向转向内容方向：逻辑属性。

练习

1. 用最小输入复现“现代布局特性”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案