主要观点：

• CSS 网格布局（CSS Grid）在网页布局中带来了巨大的改进，但对于某些复杂布局（如 masonry 布局）仍存在挑战。
• Masonry 布局是一种内容像砖墙或瀑布般排列的模式，具有容纳不同纵横比内容、遵循自然阅读顺序等优点。
• 关于 Masonry 布局是否应成为 CSS Grid 的一部分存在争论，部分人认为应作为独立的display类型，部分人则认为应融入 CSS Grid 以提供更多创意可能性。
• 通过示例展示了如何利用 CSS Grid 的各种功能来实现 Masonry 布局及相关变体，包括定义列、跨越列、使用 subgrid 等。
• 强调了网格在图形设计中的重要性，以及 CSS 应具备创建多种类型网格的能力。

关键信息：

• 2020 年 Mozilla 首次提出 CSS 中用于“masonry 布局”的机制，2022 年苹果在 Safari Technology Preview 中开始实现，目前仍在 CSS 工作组中讨论。
• 四个演示展示了 CSS Grid Level 3 中 masonry 布局的能力，包括不同的列设置和内容跨越。
• CSS Grid 提供多种定义列的方式，如固定大小、fr单位、minmax()函数等，与 masonry 布局结合可创造更动态灵活的布局。
• 争论围绕 Masonry 布局应作为 CSS Grid 的一部分还是独立类型展开，涉及语法、功能限制等方面。
• 网格在图形设计中有悠久历史，CSS Grid 应能创建多种类型的网格，包括 columnar 网格。

重要细节：

• 示例代码展示了如何使用display: grid、grid-template-columns、grid-template-rows: masonry等属性来创建 classic masonry / waterfall 布局。
• 介绍了如何利用 CSS Grid 的其他功能，如跨越列、subgrid 等，来实现更复杂的布局变化。
• 提到了不同人对网格和 Masonry 布局的不同看法，以及 Mark Boulton 对对称列网格的看法。
• 讨论了关于 Masonry 布局名称的问题，目前在 Safari Technology Preview 中使用“masonry”，但可能会更改，如使用“off”或“columnar grid”等。