如何使用 CSS 构建砌体布局

什么是砌体布局？

砌体布局是指不同尺寸的物品被布置成没有任何不均匀的间隙。通常，当项目在网格视图中时，它们要么按行对齐，要么按列对齐，要么同时对齐。但是在砌体布局中，即使一行或一列中有一个较短的元素，下一个元素也会占据空间。

如何实现Masonry Layout？

有很多方法可以实现这一点，但最好的方法之一是使用grid-template-columns并使用repeat()函数。让我们开始吧。

网格grid-template-columns属性

除了明确的列大小调整之外，CSS Grid 最有价值和最实用的方面之一是能够重复列直到它们被填满，然后自动将项目放入其中。特别是，指定我们想要在网格中的列数然后让浏览器控制这些列的响应性的选项导致在较小的视口尺寸上显示较少的列，而随着屏幕宽度的增加显示更多的列。

这是通过使用 repeat() 函数和自动放置关键字来实现的。总而言之， repeat()函数允许我们根据需要多次重复列。例如，如果我们正在创建一个 12 列的网格，我们可以编写以下内容：

 .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }

通过使用1fr指令，指示浏览器在列之间划分可用空间，以便每个列获得相等的份额。也就是说，不管它有多大，这个例子中的网格总是有 12 列。然而，这还不够好，因为内容在较小的视口上会被过度挤压。

所以我们需要为列指定一个最小宽度，确保它们不会变得太窄。我们可以使用minmax()函数来做到这一点。

 grid-template-columns: repeat(12, minmax(300px, 1fr));

但是由于CSS Grid 的运行方式，该行会溢出。我们明确指示浏览器每行重复列 12 次，因此即使视口宽度太小而无法满足新的最小宽度要求，该列也不会换行。

要实现换行，我们可以使用auto-fit或auto-fill关键字。

 grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

通过使用这些关键字，我们指示浏览器为我们处理元素换行和列大小调整，使本来会溢出的元素换行。

这是网格现在的样子：

但这不是砌体布局。那么如何实现呢？让我们来看看。

网格grid-column和grid-row属性

grid-column和grid-row属性指定网格项目在网格布局中的大小和位置。因此，我们能够指定网格内单个网格项的宽度或高度。为此，我们可以使用span关键字。

要增加第一个网格项的宽度，我们可以这样写：

 .grid-item: nth-child(1) { grid-column: span 2; grid-row: span 1; }

因此，第一个网格单元将跨越两列并具有以下外观：

同样，如果我们想增加第二个网格项的高度，我们可以这样写：

 .grid-item: nth-child(2) { grid-column: span 1; grid-row: span 2; }

因此，第二个网格单元将跨越两行并具有以下外观：

以类似的方式，如果我们以所需的方式跨越每个网格项目，我们将获得以下内容：

但是，如果网格项的数量过多，则无法为每个网格项指定精确的高度和宽度。因此，我们可以动态分配值：

 .grid-item: nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .grid-item: nth-child(7n+2) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+4) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+5) { grid-column: span 3; grid-row: span 1; }

这是输出：

但这就够了吗？让我们通过添加一些视角将其提升到一个新的水平。

我们可以通过添加 perspective() 并使用 transform() 属性来实现：

 .active { transform: perspective(18cm) rotate(20deg); transform-style: preserve-3d; transform-origin: left; }

此外，我们还有一个菜单栏，当选择该菜单栏时，会将网格从常规网格切换为透视网格。我们可以为此使用 JavaScript：

 menu.onclick=()=>{ grid.classList.toggle('active'); }

最后的输出是：

你喜欢这篇文章吗？在下面的评论中让我知道！

想知道最通用的数据可视化 JavaScript 解决方案是什么？阅读此处： https ://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/