html - 仅CSS的砌体布局

Question

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



参数:

所有元素的宽度相同

元素的高度无法通过服务器端计算(图像加上各种文本)

如果必须

，我可以使用固定数量的列

对此有一个简单的解决方案可以在现代浏览器中运行， the column-count property.

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



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



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

制作项目display: inline-block:wastes vertical space.

制作项目float: left:lol, no.

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

有一些新奇的flexbox魔术使这成为可能吗？

Answer 1

flex 盒

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

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

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

这就是为什么flexbox构建网格的能力有限的原因。这也是W3C开发了另一种CSS3技术Grid Layout的原因。
row wrap
在带有flex-flow: row wrap的flex容器中，flex项必须包装到新行。

这意味着flext项目的无法包装在同一行中的另一个项目之下。



请注意上面的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 is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

^{source: http://masonry.desandro.com/}

How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...

^{source: 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