【外评】CSS masonry 砌体布局的替代建议
内容提要
Chrome团队认为在CSS网格规范中实现砌体布局是错误的，他们建议将砌体定义为一种单独的布局方法。他们提供了替代建议，如定义具有相等或不同列宽的砌体布局，允许内容跨列，以及使用砌体轨道的次砌体或次网格。他们希望实现一个可互操作且可靠的规范。
延伸解读
性能考量：为何砌体不宜捆绑在网格中
文章指出，网格布局在布局前已知所有项目位置，便于实现复杂的固有尺寸计算；而砌体布局则按顺序放置项目，浏览器无法预知每个轨道中的项目数量。当混合固定尺寸和固有尺寸轨道时，浏览器需执行布局前步骤，以各种可能方式测量项目，导致大型网格出现性能问题。若将砌体纳入网格规范，并添加子网格，这些问题会呈指数级放大。因此，Chrome团队认为在网格规范中实现砌体会带来性能风险。
语义与属性差异：砌体与网格的冲突
砌体和网格在布局方法上具有不同意义。例如，grid-template-areas在砌体中只能沿非砌体方向指定初始行；grid-auto-flow不适用于砌体，而masonry-auto-flow不适用于网格；网格有四个放置属性，砌体只有两个；网格可使用全部六个对齐属性，砌体仅使用类似Flexbox的子集。若将砌体捆绑为网格，会打破格式上下文与对齐属性可用性之间的明确联系，导致开发者困惑，并增加规范复杂性。
替代方案：独立砌体布局的灵活性与限制
Chrome团队建议将砌体定义为单独的布局方法，使用display: masonry。这允许实现经典等宽列布局、不同列宽、以及网格中不允许的额外轨道尺寸（如repeat(auto-fill, max-content)）。还支持内容跨列和项目放置，通过masonry-track属性实现。但独立砌体规范仍不允许混合固有尺寸和固定尺寸轨道，以避免性能问题。这些方案旨在提供互操作性且可靠的规范，同时满足开发者需求。
Q&A
Chrome团队对CSS网格规范中实现砌体布局的看法是什么？
Chrome团队认为在CSS网格规范中实现砌体布局是错误的，建议将砌体定义为一种单独的布局方法。
为什么在CSS网格中添加砌体会导致性能问题？
在网格中添加砌体会导致浏览器在布局前无法准确知道每个轨道中的内容，从而引发性能问题。
Chrome团队提供了哪些替代建议来实现砌体布局？
Chrome团队建议使用display: masonry定义砌体布局，并提供了多种轨道尺寸和允许内容跨列的选项。
砌体布局与网格布局有什么不同？
砌体布局和网格布局在布局方法上具有不同的意义，砌体允许内容跨列，而网格则在布局前确定所有项的位置。
Chrome团队希望如何定义砌体布局以避免复杂性？
Chrome团队希望在网格规范之外定义砌体，以避免复杂性并确保可互操作性。
在砌体布局中，如何允许内容跨列？
可以使用masonry-track属性来允许内容跨列，例如使用masonry-track: span 2来跨越两列。
