使用column-width实现响应式多列文本时如何避免CLS布局偏移

• 使用column-width实现宽屏多列文本块布局时，PageSpeed Insights工具检测到桌面端约0.1的高CLS（累计布局偏移），移除多列样式后CLS检测值直接为0。
• 测试过通过外部样式表、页面内style块、元素内联style等所有方式加载多列样式，只要启用多列布局就会触发高CLS，更换样式加载形式完全没有改善效果。
• 最小复现案例在PageSpeed Insights中仍能检测到0.059的CLS，初步疑惑多列布局是否会在页面渲染的最后阶段才被处理，进而触发布局偏移，目标是找到既能保留「小屏单栏、宽屏多栏」响应式特性，又不产生额外CLS的实现方案。

该问题并非多列布局被放在渲染流程末尾单独处理导致的流程bug，本质是多列布局的最终高度计算高度依赖字体加载完成后的实际文本排版尺寸。
浏览器完成首次初始布局时，会先基于系统默认字体对文本做初步的单栏布局测量；等网页自定义字体加载完成、多列分割逻辑计算出最终文本块高度后，整个文本容器的高度会比初始单栏测量值明显偏小，这部分高度差带来的可见区域偏移，就会被CLS检测工具捕获。
测试时发现更换样式加载方式无效，是因为只要column-width规则的生效时间点晚于首次初始布局计算，就会产生高度差偏移，和样式的引入位置无关。

• 提前给多列容器设置匹配最终排版的最小高度
  让浏览器在首次布局计算阶段，就按照宽屏多列排版的实际文本高度为容器预留占位空间，从根源上避免多列计算完成后容器高度塌缩产生的偏移。
• 用媒体查询断点替代自动适配的column-width实现多列切换
  不依赖column-width的自动响应能力，而是将宽屏场景下的多列规则写在对应视口宽度的媒体查询中，让浏览器在初始布局阶段就直接识别视口尺寸、计算多列布局的最终参数，跳过“先按单栏计算、再切换为多栏”的中间流程，消除高度差来源。
• 配合content-visibility: auto优化非首屏文本块的布局计算
  对不在首屏视口范围内的多列文本块，添加content-visibility: auto属性，让浏览器延迟计算这部分内容的布局尺寸，等用户滚动到对应位置前再完成计算，避免这部分高度差被纳入首屏CLS的统计范围。

<!doctype html>
<html>
<head>
<style>
.mcol2 {
    column-width: 36em;
}
</style>
</head>
<body>
<article class="mcol2">
  <p>(19th March 1951 - 12th February 2014)</p>
  <p>Aldo Colombini moved to the United States from Italy in 1993. He has performed in over 45 countries. He is a F.I.S.M. prizewinner. He performed often on Italian television (RAI 1) and has also appeared on television shows in Portugal, Spain, Japan, Colombia and Sweden.</p>
  <p>Aldo has performed often at Caesar’s Magical Empire in Caesar’s Palace, Las Vegas and continues to appear several times a year at the famous Magic Castle in Hollywood, California where he is one of few magicians who are able to perform in all four showrooms. Aldo was voted by the Academy of Magical Arts, Hollywood, California: twice Parlor magician of the year. In the history of the Magic Castle is the only magician to be nominated in all five categories: Comedy, Stage, Close-up, Parlor and Lecturer. He appeared on “Masters of Illusion,” a series of weekly magic specials airing on PAX-TV. He speaks Italian, English, Spanish and French and can perform in all four languages allowing him to dazzle audiences from diverse backgrounds.</p>
  <p>Aldo has written and published several books on magic and created many magical effects used by magicians all over the world. He also lectures on magic worldwide and was nominated by the Academy of Magical Arts twice Lecturer of the Year.</p>
  <p>set alert for this author</p>
</article>
</body>
</html>

内容的提问来源于stack exchange，提问作者Chris