仅使用 CSS 的砌体布局

本文概述

Pinterest你有没有想过实现由代表的砌体布局？

CSSだけでMasonryレイアウト

我写了一个方法来实现这个布局只用CSS。

截止到2022年8月17日这篇文章发布的时候，基本上所有浏览器都无法使用。
所以这是一篇未来的文章。
仅对于 Firefox，您可以尝试将 about:config 更改为 layout.css.grid-template-masonry-value.enabled。

基础写作

我们将在我们将样式应用于以下 HTML 的前提下继续进行。

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

首先，将display: grid; 申请到您要申请砌体的区域。

  .grid {
    display: grid;
  }

然后在grid-template-columns 或grid-template-rows 上指定masonry。
grid-template-columns 水平放置，grid-template-rows 垂直放置。
在下面的示例中，我使用了grid-template-rows（您会经常使用它）。

  .grid {
    display: grid;
+   grid-template-rows: masonry;
  }

以上是最简单的形式。
剩下的就是添加代码让它看起来不错，比如gap 或background-color。

见笔无标题通过 Keisuke 4 月 1 日（@xrxoxcxox) 上代码笔.

展示位置如何运作

现实是详细算法它由决定，但我将描述解释以供人类粗略理解。

它只是“将元素一个接一个地排列在具有最多空白的列（或行）中”。

我将根据前面 CodePen 中的示例进行解释。
首先，在放置第一个元素时，由于还没有元素，它使用与普通 CSS Grid 相同的机制放置。
在这种情况下，它是左上角。

CSSだけでMasonryレイアウト

然后是第 2 到第 4 个元素。
在示例中，指定了grid-template-columns: repeat(4, 1fr);，因此可以肯定会绘制4列。
因此，直到第 4 个的元素从左开始按顺序排列。

CSSだけでMasonryレイアウト

放置第五个元素。
查看第 1 到第 4 列，第一列的边距最大。
所以第 5 个元素将放在第 1 列。

CSSだけでMasonryレイアウト

由于放置了第五个元素，第三列的空白区域最多。
所以第 6 个元素将放在第 3 列。

CSSだけでMasonryレイアウト

即使有第 6 个元素，第 3 列的边距仍然最大。
所以第 7 个元素也放在第 3 列。

CSSだけでMasonryレイアウト

到目前为止，其余元素 8 到 10 只是沿线放置。

CSSだけでMasonryレイアウト

有时你可能会想“我要你按照 HTML 中描述的顺序来排列”。
在这种情况下，您应该指定masonry-auto-flow: next;。
如果您指定此项，则元素将根据网格顺序排列。

CSSだけでMasonryレイアウト

应用写作风格

在前面的例子中，可以为.item类的元素指定grid-column-start: span 2;等来改变宽度，或者指定grid-column: 2 / 4;等来固定位置。

与通常的display: grid; 一样，具有显式对齐规范的元素优先于那些没有的元素，因此它与我刚刚解释的流程有点不同。

还有align-tracks 和justify-tracks 的属性类似于align-content。
可能的值与align-content相同，但可以指定多个值，以逗号分隔，并单独设置每一列（或每一行）。

参考

感谢您阅读到最后！
我们也在推特上发送信息，所以如果你喜欢，请关注我们！

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308624049.html