砌体布局是在列中布置不同高度的项目，但不是在行轴上对齐，而是下面的项目有效地向上移动以填补任何间隙，有点像瓦工 - 因此名字。Pinterest 的网格设计是一个常见的例子，每当砖石对话出现时。
[图片上传失败...(image-4dfa53-1657379153685)]
CSS中砌体的当前状态
目前，我们可以使用列在 CSS 中构建一种人造砖石（或“fakesonry”，如果你愿意的话）布局。
.list { columns: 20rem; column-gap: 1rem;}
这将创建一个看起来像砖石的布局，但项目是按列而不是按行排序的。如果您在整个页面上使用此布局，则用户浏览项目的顺序是他们需要沿着每一列向下工作，一直到最后，然后再次向上滚动到页面顶部。如果顺序无关紧要，也许这可能是一种不错的视觉体验，但是通过键盘或屏幕阅读器导航的用户仍然必须按列浏览。当我们想到砌体布局时，我们通常期望项目是水平排列的（或沿内联轴）。
我们也可以构建一个看起来像砖石的网格，但它需要手动放置网格项目，并且每个项目的高度不会真正由内容决定。事实上，我们可以采用多种方式，几乎可以在 CSS 中进行砌体，其中一些在某些情况下可能会为我们提供很好的服务——请查看2019 年的这篇 CSS 技巧文章，其中整理了其中的一些。（但请注意使用 CSS 重新排序。出于可访问性原因，不建议这样做。）
但是构建一个真正的砌体布局目前需要 Javascript，例如为此目的而创建的Masonry库。
砌体的下一步是什么？
我记得 Rachel Andrew 前段时间讨论过 CSS 中的砌体，但我承认它最近有点不在我的视线范围内。我认为这部分是因为这些天我不需要建造那么多砖石布局。其中一些可能归因于换工作，但我也怀疑砖石在设计师中不像以前那样受欢迎。对我来说，这感觉像是 2010 年代后期的一种设计趋势，从 Pinterest 风靡一时开始。
也许这也归功于更高的性能和可访问性意识。使用 JS 库进行布局不会对您的性能指标有任何好处，我建议尽可能不要这样做。当然，砌体看起来很酷（或者它在 2017 年做到了），但我认为这不是最用户友好的布局：当项目未对齐时，内容的顺序并不那么清楚。（我没有任何证据支持这一点，这只是个人感觉。）
但是 CSS 中的砌体呢？
啊，是的，这篇文章的重点。尽管 masonry 可以说不那么受欢迎，但如果没有 JS 也能做到这一点仍然很棒。嗯，CSS Grid Level 3 Specification包含了一个砌体布局的建议。事实上，它已经可以在 Firefox 中通过一个标志启用，因此您可以自己尝试一下。
它可以使用masonryorgrid-template-columns属性grid-template-rows的关键字。此示例将为我们提供一个 6 列网格，其中砌体应用于行轴，以复制 Pinterest 样式的网格：
.grid { display: grid; grid-template-rows: masonry; grid-template-columns: repeat(6, 1fr);}
对于完整的概述，Rachel从 2020 年开始在 Smashing Magazine 上写了一篇很棒的文章。
砖石是否属于网格？
不久前，关于 masonry 是否属于 Grid 规范存在一些争论，因为它不是真正的 Grid或flexbox，但两者都有。或者也许它完全是自己的东西？虽然我确实对它成为 Grid 规范的一部分有所保留，但我认为当前的实现是有意义的。它在某些方面感觉有点像Subgrid，我们有效地告诉一个元素在行轴或列轴上使用不同的网格 - 尽管不是由其父级决定，而是由预定的算法决定。
另一个更深入人心的问题是这种努力是否值得。如果砌体是一种下降的设计趋势，那么有时 Web 标准的缓慢步伐可能会确保当浏览器支持广泛普及时，无论如何都没有人真正想要使用它。
网友评论