仅CSS的砌体布局

Question

我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.

参数:

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

有这一个简单的解决方案,在现代浏览器,工作的column-count性质.

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

虽然我需要按行排序元素,至少大约:

我试过的方法不起作用:

• 制作物品display: inline-block:浪费垂直空间.
• 制作物品float: left:lol,没有.

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

是否有一些新奇的flexbox魔法可以实现这一目标？

Answer 1

Flexbox的

Flexbox无法实现动态砌体布局,至少不能以干净有效的方式进行.

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

真正的网格系统是二维的,这意味着它可以沿水平和垂直线对齐项目.内容项可以同时跨行和列,灵活项不能执行.

这就是Flexbox构建网格的能力有限的原因.这也是为什么W3C开发了另一种CSS3技术Grid Layout的原因.

row wrap

在Flex容器中flex-flow: row wrap,flex项必须换行到新行.

这意味着flex项不能包装在同一行中的另一个项下.

注意上面div#3如何包装在div#1下面,创建一个新行.它不能包裹在div#2下面.

因此,当物品不是行中最高的时,空白区域仍然存在,从而产生难看的间隙.

column wrap

如果切换到flex-flow: column wrap,则可以更好地实现类似网格的布局.但是,列方向容器有四个潜在的问题:

1. Flex项目垂直流动,而不是水平流动(在这种情况下,您需要).
2. 容器水平展开,而不是垂直展开(如Pinterest布局).
3. 它要求容器具有固定的高度,因此物品知道包裹的位置.
4. 在撰写本文时,它在所有主要浏览器中都存在缺陷,其中容器不会扩展以容纳其他列.

因此,在这种情况下,列方向容器不是一种选择,在许多其他情况下也是如此.

项目维度未定义的 CSS网格

如果可以预先确定内容项的各种高度,网格布局将是您问题的完美解决方案.所有其他要求都在Grid的容量范围内.

必须知道网格项的宽度和高度才能缩小与周围项目的间隙.

因此,在这种情况下,Grid是构建水平流动砌体布局的最佳CSS所必需的.

实际上,在CSS技术到来之前能够自动缩小差距,CSS通常没有解决方案.这样的事情可能需要回流文档,所以我不确定它会有多么有用或有效.

你需要一个脚本.

JavaScript解决方案倾向于使用绝对定位,它从文档流中删除内容项,以便无间隙地重新排列它们.这是两个例子:

• Desandro Masonry

  Masonry是一个JavaScript网格布局库.它的工作原理是根据可用的垂直空间将元素放置在最佳位置,有点像石膏在墙上贴合石头.

  ^{来源:http://masonry.desandro.com/}

• 如何建立一个像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演示

这个怎么运作

1. 建立块级网格容器.(inline-grid将是另一种选择)
2. 该grid-auto-rows属性设置自动生成的行的高度.在这个网格中,每行高50px.
3. 该grid-gap属性是一个速记grid-column-gap和grid-row-gap.此规则在网格项之间设置10px的间隙.(它不适用于物品和容器之间的区域.)

4. 该grid-template-columns属性设置显式定义列的宽度.

   的repeat符号重复定义列(或行)的图案.

   该auto-fill函数告诉网格尽可能多的列(或行)排列而不会溢出容器.(这可以为flex布局创建类似的行为flex-wrap: wrap.)

   该minmax()函数为每列(或行)设置最小和最大大小范围.在上面的代码中,每列的宽度至少为容器的30%,并且最大可用空间.

   的fr单元表示在网格容器中的自由空间的一小部分.它与flexbox的flex-grow属性相当.

5. 随着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

Answer 2

这是最近发现的涉及 flexbox 的技术：https ://tobiasahlin.com/blog/masonry-with-css/ 。

这篇文章对我来说很有意义，但我没有尝试使用它，所以除了迈克尔的回答中提到的之外，我不知道是否有任何警告。

这是文章中的一个示例，它利用了该order属性，并结合了:nth-child.

堆栈片段

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

 /* Just to print out numbers */
div.item::before {
  counter-increment: items;
  content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  border: 1px solid #ddd;
  margin: 0;
  content: "";
  padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }

<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>

Answer 3

我发现这个解决方案，它很可能与所有浏览器兼容。

注意：如果有人发现任何错误或浏览器支持问题。请更新这个答案或评论

CSS Profpery 支持参考：

列数、间隙、 内部填充分隔符、内部分页符

注意：page-break-inside该属性已被break-inside属性取代。

  

.container {
  -moz-column-count: 1;
       column-count: 1;
  -moz-column-gap: 20px;
       column-gap: 20px;
  -moz-column-fill: balance;
       column-fill: balance;
  margin: 20px auto 0;
  padding: 2rem;
}
.container .item {
  display: inline-block;
  margin: 0 0 20px;
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  width: 100%;
}
.container .item img {
  width: 100%;
  height: auto;
}
@media (min-width: 600px) {
  .container {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 900px) {
  .container {
    -moz-column-count: 3;
         column-count: 3;
  }
}
@media (min-width: 1200px) {
  .container {
    -moz-column-count: 4;
         column-count: 4;
  }
}

   
 CSS-Only Masonry Layout 
  
<div class="container">
  <div class="item"><img src="https://placeimg.com/600/400/animals" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/arch" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/450/people" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/350/tech" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/800/animals/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/650/arch/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/400/people/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/tech/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/200/animals/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/700/arch/grayscale" alt=""></div>
</div>