开源浏览器引擎WebKit团队提出CSS Grid Lanes,试图将长期以来依赖JavaScript库才能稳定实现的瀑布流布局,纳入浏览器原生的CSS布局能力中。该设计通过新增的display:grid-lanes作为入口,让开发者沿用现有的CSS Grid轨道(Grid Track)定义语法来描述列或行,再由浏览器自动放置不同高度的内容项。目前该功能已在Apple Safari技术预览234版中支持测试。
WebKit在说明中将Grid Lanes定位为瀑布流布局的下一步,并提到这一方案建立在Mozilla与WebKit此前研究的基础上,同时经过CSS工作组与各浏览器厂商多轮讨论后,逐步形成了更明确的规范。
W3C发布的CSS Grid Layout Module Level 3工作草案中,将grid-lanes与inline-grid-lanes纳入display属性的新值,并定义了Grid Lanes的布局模型及相关行为。
WebKit特别将可用性与无障碍性纳入设计考量。传统瀑布流布局常出现视觉顺序与键盘导航顺序不一致的问题,用户按Tab键时可能从第一列底部跳到第二列顶部,导致阅读和操作体验断裂。Grid Lanes的目标是在保留瀑布流视觉密度的同时,让用户能更自然地通过键盘在当前可见内容间移动,减少因测量内容高度和决定放置位置而必须依赖JavaScript介入布局的需求。
为减少因微小高度差异导致频繁换列,从而引发视觉跳动与导航困惑,WebKit提出item-tolerance属性,让浏览器在选择下一个项目落点时,将高度差在一定范围内的候选列视为同一层级,避免因细微差异做出令人意外的换列决策。该属性在规范与Safari技术预览234版中目前使用item-tolerance命名,预设以1em作为判断接近程度的基准,但WebKit也提醒名称仍可能调整。
W3C工作草案也讨论了兼容性方面的自然降级机制。示例指出,开发者可先声明display:grid,再声明display:grid-lanes,在不支持Grid Lanes的浏览器中,后者会被忽略,布局仍会以普通Grid方式呈现,只是可能产生较多垂直方向的空白。这种写法使团队能以较低风险逐步在支持环境中启用新功能,同时保留可接受的降级显示效果。
现阶段Grid Lanes仍处于工作草案和技术预览阶段,细节包括命名与部分行为仍可能调整。