现代 CSS 布局：从“能用”到“好用”

先描述关系，再调整尺寸

传统布局常从固定宽度开始，现代 CSS 更适合先表达元素之间的关系。Grid 的 minmax() 与 auto-fit 可以让卡片在不同空间中自然换行。

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }

这段代码没有写任何断点，却已经覆盖了大量常见屏幕尺寸。布局规则因此更接近设计意图。

组件应该感知容器

媒体查询关注视口，而组件真正关心的是自己可用的空间。容器查询让同一张卡片在侧栏和主区域中呈现不同结构。

.card-shell { container-type: inline-size; }
@container (width > 32rem) { .card { grid-template-columns: 12rem 1fr; } }

用逻辑属性减少特殊情况

margin-inline、padding-block 等逻辑属性能够天然适应不同书写方向，也更准确地表达布局意图。

好的 CSS 不是堆叠更多规则，而是让更少的规则覆盖更多场景。