砌体布局

实验性功能： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表格。

CSS 网格布局规范的第 3 级包括用于 grid-template-columns 和 grid-template-rows 的 masonry 值。本指南详细介绍了砌体布局是什么以及如何使用它。

砌体布局是一种布局方法，其中一个轴使用典型的严格网格布局（通常是列），另一个轴使用砌体布局。在砌体轴上，项目在下一行时会上升以完全填补间隙，而不是坚持使用带有间隙的严格网格（在较短的项目之后留下间隙）。

创建砌体布局

要创建最常见的砌体布局，您的列将是网格轴，行将是砌体轴。使用 grid-template-columns 和 grid-template-rows 定义此布局。

css

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

此容器的子元素现在将按项目逐行布局，就像使用常规网格布局自动放置一样。但是，当它们移到新行时，项目将根据砌体算法显示。项目将加载到空间最大的列中，从而形成紧凑的布局，而没有严格的行轨道。

也可以创建项目加载到行中的砌体布局。

在网格轴上，事物将按您在网格布局中预期的那样工作。您可以使用 span 关键字导致项目跨越多个轨道，同时保持自动放置。项目也可以使用基于行的定位进行定位。

在此示例中，两个项目跨越两个轨道，砌体项目围绕它们工作。

此示例包含一个具有列定位的项目。在砌体布局发生之前，会放置具有确定放置的项目。

masonry-auto-flow 属性为您提供了一种更改砌体算法行为的方法。为其指定 next 值，项目将按顺序在网格轴上显示，而不是进入具有最多可用空间的轨道。positioned 值将忽略具有确定放置的项目，并按顺序修改的文档顺序放置项目。

在不支持砌体的浏览器中，将改用常规网格自动放置。

BCD 表格仅在启用 JavaScript 的浏览器中加载。

BCD 表格仅在启用 JavaScript 的浏览器中加载。