弹性盒
Flexbox无法实现动态砌体布局，至少不能以一种干净有效的方式。
Flexbox是一维布局系统。这意味着它可以沿水平或垂直线对齐项目。弹性项目仅限于其行或列。
真正的网格系统是二维的，这意味着它可以沿水平和垂直线对齐项目。内容项目可以同时跨越行和列，而弹性项目则不能。
这就是为什么flexbox构建网格的能力有限的原因。这也是W3C开发了另一种CSS3技术Grid Layout的原因。
row wrap
在带有flex容器中flex-flow: row wrap，flex项必须包装到新行。
这意味着弹性项目不能包装在同一行中的另一个项目之下。
请注意上面的div＃3如何在div＃1之下包装，从而创建新行。它不能环绕在div＃2下。
结果，当项目不是该行中最高的项目时，将保留空白，从而造成难看的间隙。
column wrap
如果切换到flex-flow: column wrap，则更可能获得网格状的布局。但是，列方向容器马上有四个潜在问题：
- Flex项目是垂直流动的，而不是水平流动的（如本例所示）。
- 容器水平扩展，而不是垂直扩展（如Pinterest布局）。
- 它要求容器具有固定的高度，因此物品知道在哪里包装。
- 在撰写本文时，它在所有主流浏览器中都有一个缺陷，在该主流浏览器中，容器不会扩展以容纳其他列。
结果，在这种情况下以及在许多其他情况下，列方向容器不是一个选项。
项目尺寸未定义的 CSS网格
如果可以预先确定内容项的各种高度，则网格布局将是解决您的问题的理想解决方案。所有其他要求都在Grid的能力范围内。
必须知道网格项目的宽度和高度，以缩小与周围项目的间隙。
因此，在这种情况下，Grid是最好的CSS，它可以用来构建水平流动的砖石布局。
实际上，除非CSS技术能够自动缩小差距，否则CSS通常没有解决方案。这样的事情可能需要重排文档，所以我不确定它会多么有用或有效。
您将需要一个脚本。
JavaScript解决方案倾向于使用绝对定位，该绝对定位从文档流中删除内容项，以便无间隙地重新排列它们。这是两个示例：
定义了项目尺寸的 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>
这个怎么运作
- 建立一个块级网格容器。（
inline-grid将是另一个选择）
- 该
grid-auto-rows属性设置自动生成的行的高度。在此网格中，每行高度为50px。
- 该
grid-gap属性是一个速记grid-column-gap和grid-row-gap。此规则在网格项目之间设置10px的间距。（不适用于物品和容器之间的区域。）
该grid-template-columns属性设置显式定义的列的宽度。
该repeat符号定义重复列（或行）的模式。
该auto-fill函数告诉网格尽可能多地排列列（或行），而不会使容器溢出。（这可以创建与flex布局类似的行为flex-wrap: wrap。）
该minmax()函数为每列（或行）设置最小和最大大小范围。在上面的代码中，每列的宽度最小为容器的30％，最大为可用的可用空间。
的fr单元表示在网格容器中的自由空间的一小部分。相当于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开发工具中，当您检查网格容器时，CSS声明中有一个微小的网格图标。单击时，它会在页面上显示网格的轮廓。
此处有更多详细信息：https : //developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
