CSS Masonry 布局初探

虽然需求并不像容器查询那么高，但能够在 CSS 中创建“Masonry”布局一直是 CSS 开发人员长期以来的一个重要需求。Masonry 指的是一种将大小不一的元素排列成不规则行的布局方式，类似于典型的砖墙横着放置。

布局本身 已经可以通过 CSS 实现，但有一个很大的前提：这些元素不是按行排列，而是按列排列，这对于很多人来说往往是致命的缺陷。

/* People usually don't want this */

1  4  6  8
2     7
3  5     9

/* They want this *.

1  2  3  4
5  6     7
8     9

如果您想要那种不规则的行以及水平源顺序，那么您就需要使用 JavaScript。不过，现在情况有所改变，因为Firefox 在其夜间版中通过功能标记启用了该功能，作为 CSS 网格的一部分。

Mats Palmgren:

该提议的实现现在可以在 Firefox 夜间版 中使用。它默认情况下是禁用的，因此您需要加载 about:config 并将首选项 layout.css.grid-template-masonry-value.enabled 设置为 true 才能启用它（在该页面上的搜索框中键入“masonry”，它会显示该首选项）。

Jen Simmons 已经创建了一些演示

这真的是一个网格吗？

来自 Rachel Andrew 的一些反对意见……

网格不是 Masonry，因为它是一个具有严格行和列的网格。如果你再看看 Masonry 创建的布局，我们并没有严格的行和列。通常我们会定义行，但列的行为更像是弹性布局或 Multicol。Multicol 布局和 Masonry 布局之间的关键区别在于，在 Multicol 布局中，元素按列显示。而 Masonry 布局中，通常希望元素按行显示。

[…]

就个人而言，我不太喜欢将它作为网格规范的一部分。乍一看它确实很有吸引力，但我认为这是一种相对专业的布局模式，实际上根本不是网格。它更像是弹性布局，而不是网格布局。

通过将这种布局方法纳入网格规范，我担心我们可能会将自己束缚在需要使用任何其他网格添加功能来支持 Masonry 功能。

这一切都还没有最终确定，并且 CSS 工作组正在积极讨论这个问题。

正如 Jen 所说

这是一个实验性的实现——被讨论为一个 可能的 CSS 规范。它还没有正式发布，并且很可能会发生变化。不要写博客文章说它已经确定下来。它还没有。它只是一个实验。一个原型。如果你有任何想法，请在 CSSWG 上发表意见。

Houdini？

上一次关于原生 Masonry 的讨论时，人们就认为 CSS 布局 API（作为 Houdini 的一部分）可以实现这一点。正如你打开 这个演示 (代码库) 在 Chrome Canary 中看到的那样，这是可行的。

我并不完全清楚 Houdini 是否旨在成为一种机制，使得类似于这样的想法能够在浏览器中进行原型设计，并最终从 Houdini 中迁移出来，还是这些想法应该始终保留在 Houdini 中，或者其他什么。