【外评】CSS masonry 砌体布局的替代建议
💡
原文中文，约4000字，阅读约需10分钟。
📝
内容提要
Chrome团队认为在CSS网格规范中实现砌体布局是错误的，他们建议将砌体定义为一种单独的布局方法。他们提供了替代建议，如定义具有相等或不同列宽的砌体布局，允许内容跨列，以及使用砌体轨道的次砌体或次网格。他们希望实现一个可互操作且可靠的规范。
🎯
关键要点
- Chrome团队认为在CSS网格规范中实现砌体布局是错误的。
- 建议将砌体定义为一种单独的布局方法，使用display: masonry。
- 在网格规范中添加砌体会导致性能问题。
- 砌体和网格在布局方法中具有不同的意义。
- 砌体布局的轨迹定义可能导致布局性能问题。
- Chrome团队希望在网格规范之外定义砌体，以避免复杂性。
- 提供了多种砌体布局的替代建议，包括不同列宽和允许内容跨列。
- 希望实现一个可互操作且可靠的规范，以满足开发者需求。
❓
延伸问答
Chrome团队对CSS网格规范中实现砌体布局的看法是什么？
Chrome团队认为在CSS网格规范中实现砌体布局是错误的，建议将砌体定义为一种单独的布局方法。
为什么在CSS网格中添加砌体会导致性能问题？
在网格中添加砌体会导致浏览器在布局前无法准确知道每个轨道中的内容，从而引发性能问题。
Chrome团队提供了哪些替代建议来实现砌体布局？
Chrome团队建议使用display: masonry定义砌体布局，并提供了多种轨道尺寸和允许内容跨列的选项。
砌体布局与网格布局有什么不同？
砌体布局和网格布局在布局方法上具有不同的意义，砌体允许内容跨列，而网格则在布局前确定所有项的位置。
Chrome团队希望如何定义砌体布局以避免复杂性？
Chrome团队希望在网格规范之外定义砌体，以避免复杂性并确保可互操作性。
在砌体布局中，如何允许内容跨列？
可以使用masonry-track属性来允许内容跨列，例如使用masonry-track: span 2来跨越两列。
➡️
