html - 仅CSS的砌体布局

Question

我需要实现一个相当普通的砌体布局。但是，由于多种原因，我不想使用JavaScript来实现它。



参数：


所有元素具有相同的宽度
元素具有服务器端无法计算的高度（图像加上各种文本）
如果必须，我可以使用固定数量的列


有一个适用于现代浏览器的简单解决方案，the column-count property.

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



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



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


使项目display: inline-block：wastes vertical space.
使项目float: left：lol, no.


现在，我可以更改服务器端渲染并重新排序项目，将项目数除以列数，但这很复杂，容易出错（基于浏览器决定如何将项目列表拆分为列），所以我想尽可能避免它。

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

Answer 1

弹性盒

Flexbox无法实现动态砌体布局，至少不能以一种干净有效的方式。

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

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

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



row wrap

在具有flex-flow: row wrap的flex容器中，flex项目必须包装到新行。

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



请注意上面的div＃3如何在div＃1之下包装，从而创建新行。它不能环绕在div＃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网格

如果可以预先确定内容项目的各种高度，那么“网格布局”将是您解决问题的理想解决方案。所有其他要求都在Grid的能力范围内。

必须知道网格项目的宽度和高度，以缩小与周围项目的间隙。

因此，在这种情况下，Grid是最好的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属性设置自动生成的行的高度。在此网格中，每行高度为50px。
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开发工具中，当您检查网格容器时，CSS声明中有一个微小的网格图标。单击时，它会在页面上显示网格的轮廓。



此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts