CSS Columns 做文章瀑布流：够用、轻、可维护

文章卡片高度不一样时，最直接的做法是上 Masonry 库。但对这个博客来说，引入一段布局脚本有点重：页面只是展示文章，不需要拖拽、不需要无限重排，也不需要复杂动画。

所以归档页用的是 CSS Columns：

.waterfall {
  columns: 3;
  column-gap: 22px;
}

.waterfall > * {
  break-inside: avoid;
  margin-bottom: 22px;
}

这个方案的优点很明确：

• 不需要等待图片加载后再计算布局；
• 没有额外 JS 包；
• 响应式只要改列数；
• 首屏更轻，布局更稳定。

它也有缺点。CSS Columns 的视觉顺序是先填第一列，再填第二列，不是从左到右逐行排列。如果页面内容是时间线、排行榜或强顺序列表，就不适合这么做。

薄荷手记的归档页更像文章墙，读者通常是扫描标题、分类和摘要，不会严格依赖横向顺序，所以这个取舍可以接受。

我比较在意的是性能边界。web.dev 的 Core Web Vitals 文档把 LCP、INP、CLS 作为体验指标，其中 CLS 和布局稳定性直接相关。能用 CSS 解决的布局，就尽量不要让 JS 在渲染后再搬动元素。参考：Web Vitals。

最后的经验是：不要因为某个效果名字听起来高级，就断定它需要复杂实现。个人站点很多时候要的是“够用且稳定”，不是“看起来像工程大项目”。