苹果WebKit团队推出CSS Grid Lanes功能，支持创建砖石式布局，现已可在Safari技术预览版234中体验。该功能通过设置display: grid-lanes和grid-template-columns等属性，实现不同尺寸元素的自动对齐排列，为网页布局带来新可能。

标题：CSS Grid Lanes：网页砌体布局的未来

经过Mozilla的前期铺垫、苹果WebKit团队多年的努力以及CSS工作组的多次讨论，网页砌体布局的未来终于到来——CSS Grid Lanes正式发布。

核心功能

通过三行CSS代码即可创建自适应布局： css .container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } 该功能已在Safari Technology Preview 234中提供试用。

工作原理

Grid Lanes的布局逻辑类似于高速公路上的车辆变道： - 浏览器自动将内容项放置在最接近容器顶部的"车道"（列）中 - 支持创建不同宽度的车道（如交替窄/宽列） - 允许内容项跨越多条车道 - 可控制布局方向（垂直瀑布流或水平砖块布局）

创新特性

1. 容差控制：通过item-tolerance属性调节布局敏感度

   • 默认值1em：仅当内容高度差超过1em时才考虑换道
   • 高容差值可减少内容项的位置跳动

2. 智能流向：

   • 使用grid-template-columns创建垂直瀑布流
   • 使用grid-template-rows创建水平砖块布局

应用场景

• 相册画廊（示例）
• 新闻文章布局（示例）
• 博物馆网站（示例）
• 大型菜单（示例）

开发者可以访问webkit.org/demos/grid3体验完整示例。该功能预计将成为响应式网页设计的重要工具，特别适合处理高度不规则的动态内容。

注：部分属性名称可能在未来调整，建议开发者关注W3C最终规范。

以下是评论内容的总结，平衡呈现不同观点并保留关键引用：

1. 支持新特性

   • 开发者期待原生瀑布流布局，认为现有方案（如Masonry）存在缺陷：
     • "This is exciting to see!... I'm looking forward to having a generally available native option"（jonah）
     • "sweeeeeeeeeeeet"（cod1r）

2. 技术兴趣

   • 开发者关注技术实现细节：
     • "I need to see how this works under the hood!"（memonkey）
     • "How would you query the location where you need to load more data..."（nitwit005）

3. 兼容性质疑

   • 担心新特性增加复杂度并影响旧设备兼容性：
     • "Anyone who wants to use this is going to drop support for older browsers..."（valleyer）
     • "the demo page linked in the article fails pretty unusably for me"（valleyer）

4. 生态影响

   • 批评浏览器更新策略可能阻碍新竞争者：
     • "Another barrier to a new browser gaining user base!"（phoronixrly）
     • "just to retain their market share... Is this needed?"（brcmthrowaway）

5. 标准进展认可

   • 对Safari团队在标准化方面的进步表示肯定：
     • "Props to the Safari team... they suddenly shot to the top of interop-2025"（culi）

6. 使用疑问

   • 现有用户对语法变更的困惑：
     • "grid-template-rows: masonry; is going to be outdated then?"（ThatMedicIsASpy）