html - 仅CSS的砌体布局

Question

我需要实施一个公平的厂外砖石布局。但是，出于许多原因，我不想使用JavaScript来完成这项工作。

参数：
所有元素的宽度都相同
元素的高度无法在服务器端计算（图像加上不同数量的文本）
如果必须的话，我可以忍受固定数量的专栏
有一个简单的解决方案可以在现代浏览器中使用，the column-count property.
该解决方案的问题是元素按列排序：

虽然我需要按顺序排列的元素，但至少大约是：

我尝试过的方法不起作用：
制作物品
制作物品
现在，我可以更改服务器端的呈现，并重新排序将项目数除以列数的项目，但这很复杂，容易出错（基于浏览器决定如何将项目列表拆分为列），因此，如果可能，我希望避免这样做。
有什么新奇的flexbox魔法使这成为可能吗？

Answer 1

挠性箱
flexbox不可能实现动态砖石布局，至少不能以干净高效的方式实现。
Flexbox是一个一维布局系统。这意味着它可以沿水平线或垂直线对齐项。柔性项仅限于其行或列。
真正的网格系统是二维的，这意味着它可以沿水平线和垂直线对齐项。内容项可以同时跨行和跨列，而flex项不能这样做。
这就是为什么flexbox在构建网格方面的能力有限。这也是W3C开发另一种CSS3技术Grid Layout的原因。
row wrap
在带有flex-flow: row wrap的flex容器中，flex项必须换行。
这意味着flex项不能在同一行的另一个项下换行。

注意上面div#3如何在div#1下面换行，创建一个新行。它不能包在2区下面。
因此，如果项目不是行中最高的，则会保留空白，从而产生难看的间隙。

column wrap
如果切换到flex-flow: column wrap，则可以实现类似网格的布局。但是，列方向容器有四个潜在的问题：
Flex项是垂直流动的，而不是水平流动的（就像本例中需要的那样）。
容器水平扩展，而不是垂直扩展（与Pinterest布局类似）。
It requires the container to have a fixed height, so the items know where to wrap.
在撰写本文时，它在所有the container doesn't expand to accommodate additional columns的主流浏览器中都有不足之处。
因此，在本例和许多其他情况下，列方向容器都不是一个选项。
未定义项维度的CSS网格
如果可以预先确定内容项的各种高度，那么网格布局将是解决问题的完美方法。所有其他要求都在电网的能力范围内。
网格项的宽度和高度必须已知，以便与周围项闭合间隙。
因此，网格，这是最好的CSS所提供的建设一个水平流动的砖石布局，在这种情况下落空。
事实上，除非CSS技术能够自动填补空白，否则CSS通常没有解决方案。像这样的事情可能需要重新浏览文档，所以我不确定它有多有用或有多高效。
你需要一个脚本。
JavaScript解决方案倾向于使用绝对定位，即从文档流中删除内容项，以便在没有间隙的情况下重新排列它们。下面是两个例子：
Desandro Masonry
Masonry是一个JavaScript网格布局库。它
通过根据可用的
垂直空间，有点像一个石匠在墙上镶嵌石头。
来源：http://masonry.desandro.com/
How to Build a Site that Works Like Pinterest
[Pinterest]确实是一个很酷的网站，但我发现有趣的是这些钉板是如何布置的。。。所以本教程的目的是重新创建这个响应块效果我们自己。。。
来源：https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html
定义了项维度的CSS网格
对于内容项的宽度和高度已知的布局，这里是纯CSS中水平流动的砖石布局：

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

jsFiddle demo
工作原理
Establish a block-level grid container.（另一个选项是inline-grid）
grid-auto-rows属性设置自动生成的行的高度。在这个格子里，每一行有50像素高。
grid-gap属性是grid-column-gap和grid-row-gap的简写。此规则设置网格项之间的间距为10px。（它不适用于项目和容器之间的区域。）
grid-template-columns属性设置显式定义的列的宽度。
repeat符号定义了重复列（或行）的模式。
auto-fill函数告诉网格尽可能多地排列列（或行），而不会使容器溢出。（这可以创建与flex布局的flex-wrap: wrap类似的行为）
minmax()函数为每个列（或行）设置最小和最大大小范围。在上面的代码中，每个列的宽度将是容器的最小值的30%，以及可用空间的最大值。
fr unit表示网格容器中可用空间的一小部分。它相当于flexbox的flex-grow属性。
使用grid-row和span我们告诉网格项它们应该跨越多少行。
浏览器对CSS网格的支持
Chrome-自2017年3月8日起完全支持（57版）
Firefox-从2017年3月6日起完全支持（版本52）
Safari-从2017年3月26日起提供全面支持（版本10.1）
Edge-自2017年10月16日起全面支持（版本16）
IE11-不支持当前规范；支持过时版本
这是完整的图片：http://caniuse.com/#search=grid
Firefox中的酷网格覆盖功能
在Firefox dev工具中，当您检查网格容器时，CSS声明中有一个很小的网格图标。单击它将在页面上显示网格的轮廓。

更多详情请点击：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts