Html 仅CSS砌体布局

我需要实施一个相当普通的砖石布局。然而，出于一些原因，我不想使用JavaScript来实现这一点

参数：

• 所有元素都具有相同的宽度
• 元素的高度无法在服务器端计算（图像加上各种数量的文本）
• 如果有必要，我可以接受固定数量的栏目

有一个简单的解决方案可以在现代浏览器中使用

该解决方案的问题在于元素按列排序：

虽然我需要元素按行排序，但至少大约：

我尝试过的不起作用的方法：

• 使项目显示：内联块
• 使项目浮动：左：

现在，我可以更改服务器端呈现并重新排序项目，将项目数除以列数，但这很复杂，容易出错（取决于浏览器决定如何将项目列表拆分为列），因此如果可能的话，我希望避免这样做

是否有一些新奇的flexbox魔法使这成为可能？

2021更新 CSS网格布局级别3包括一个

砌体

功能

代码如下所示：

grid-template-rows: masonry
grid-template-columns: masonry

截至2021年3月，它仅在Firefox中可用（激活标志后）

结束更新；原始答案如下

---

柔性箱 flexbox不可能实现动态砌石布局，至少不能以干净高效的方式实现

Flexbox是一个一维布局系统。这意味着它可以沿水平线或垂直线对齐项目。弹性项仅限于其行或列

真正的网格系统是二维的，这意味着它可以沿水平线和垂直线对齐项目。内容项可以同时跨行和跨列，而flex项不能做到这一点

这就是为什么flexbox构建网格的能力有限。这也是W3C开发另一种CSS3技术的原因

---

行换行

在具有

flex flow:row wrap

的flex容器中，flex项必须换行到新行

这意味着弹性项目不能包装在同一行的另一个项目下

请注意上面的div#3如何在div#1下面换行，从而创建一个新行。它不能在div#2下面包装

因此，当项目不是行中最高的项目时，会保留空白，从而产生难看的间隙

---

列换行

如果切换到

flex-flow:column-wrap

，则更容易获得类似网格的布局。但是，列方向容器有四个潜在问题：

Flex项垂直流动，而不是水平流动（如本例中所需）

容器水平扩展，而不是垂直扩展（如Pinterest布局）

在撰写本文时，它在所有主要的浏览器中都存在不足

因此，在这种情况下，以及在许多其他情况下，列方向容器不是一个选项

---

未定义项目维度的CSS网格 如果可以预先确定内容项的不同高度，网格布局将是解决问题的完美方案。所有其他要求都在电网的能力范围内

网格项目的宽度和高度必须已知，以便与周围项目闭合间隙

所以网格，这是CSS为构建水平流动的砖石布局所提供的最好的工具，在这种情况下是不够的

事实上，在CSS技术能够自动填补空白之前，CSS通常没有解决方案。像这样的事情可能需要对文档进行回流，因此我不确定它会有多有用或效率

你需要一个脚本

JavaScript解决方案倾向于使用绝对定位，它从文档流中删除内容项，以便重新排列它们，而不留空隙。以下是两个例子：

砌体是一个JavaScript网格布局库。信息技术 工作原理是根据可用数据将图元放置在最佳位置 垂直空间，有点像石匠在墙上安装石头

资料来源：

[Pinterest]确实是一个很酷的网站，但我发现有趣的是这些插针板的布局。。。因此，本教程的目的是重新创建这种响应块效果

资料来源：

---

定义了项目维度的CSS网格 对于已知内容项宽度和高度的布局，这里是纯CSS中的水平流动砖石布局：

网格容器{
显示：网格；/*1*/
网格自动行：50px；/*2*/
栅极间隙：10px；/*3*/
网格模板列：重复（自动填充，最小值（30%，1fr））；/*4*/
}
[简短]{
网格行：跨度1；/*5*/
背景颜色：绿色；
}
[高]{
网格行：跨度2；
背景颜色：深红色；
}
[更高]{
网格行：跨度3；
背景颜色：蓝色；
}
[最高的]{
网格行：跨度4；
背景颜色：灰色；
}
网格项{
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体大小：1.3em；
字体大小：粗体；
颜色：白色；
}

01
02
03
04
05
06
07
08
09
10
等

这是最近发现的涉及flexbox的技术：

这篇文章对我来说很有意义，但我还没有尝试使用它，所以除了Michael的回答中提到的以外，我不知道是否还有其他警告

下面是本文中的一个示例，它使用了

order

属性，并结合了

：n个child

堆栈片段

.container{
显示器：flex；
柔性流：柱包裹；
排列