CSS：砖石布局

什么是砌体布局？

来自 MDN：

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

pinterest.com 的布局就是一个典型的例子：

我们可以从 CSS 工具箱中使用什么？

网格

我们使用简单的 HTML 标记：

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

响应能力很棒，但每张图片下方都有间隙。

列数

接下来，使用column-count CSS容器属性。

column-count CSS 属性将元素的内容分成指定数量的列。

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

不好。
当前布局看起来符合预期，但图像已缩放且不响应。虽然我们可以使用媒体查询来控制响应能力，但我们的目标是提供更强大的解决方案。

使用列

columns CSS 简写属性设置绘制元素内容时要使用的列数以及这些列的宽度。

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

一行代码。太棒了！

这是如何运作的？

每列的最小宽度为 250px。如果有超过 250 像素的额外空间，列将扩展以填充空间。如果空间减少，列数也会相应减少。

附加功能

我们可以通过将布局设置为最多 X 列来限制列数：

.photos {
  columns: 250px 2;
  ...
  ...
}

使用

列
不仅仅限于砌体图像布局。我们还可以使用它来设置文本列的样式：相同的 CSS，不同的内容。

最后的想法

这有帮助吗？
您的用例是什么？

以上是CSS：砖石布局的详细内容。更多信息请关注PHP中文网其他相关文章！