javascript - 可以跨越多列的砌体布局

Question

我正在尝试创建一个砖石布局，该布局也可以跨越 2 列的元素。到目前为止，我已经做了一个我认为是好的开始。看看:

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 5px;
  max-width: 600px;
  margin: 0 auto;
}
  
.wrapper  div {
  background: red;
}  

.two {
  grid-column-end: span 2;
}

<div class="wrapper">
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="two" style="grid-row-end: span 4; background-color: green;"></div>
  <div class="one" style="grid-row-end: span 4"></div>
  <div class="one" style="grid-row-end: span 2"></div>
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="one" style="grid-row-end: span 2"></div>
  <div class="one" style="grid-row-end: span 5"></div>
</div>

如果你想玩的话，这里有一个 JsFiddle:http://jsfiddle.net/9o4de38u/2/

现在，为了让它起作用，我还有一些 javascript 来确定元素需要跨越多少行。我认为它不相关，因此为了演示目的，我将其省略并在 html 中硬编码了值。

我的问题是，如果您仔细查看我的演示，绿色框跨越 2 列，但是绿色框之前的空间是空的。因为果岭要占2格，前面的元素只占了1格，留了很大的空隙。我想用绿色之后的元素来填补这个空白。但是，我不确定执行此操作的最佳方法是什么。

我的想法是简单地交换 html 中元素的顺序。如果我交换绿色和之前的红色，那么它会很好地填充。问题是如何做到这一点。我目前的想法是使用 Javascript 并使用元素的起始位置来确定是否需要交换。例如，如果绿色框与它之前的红色框具有相同的起始位置，则交换它们。

但我不知道我能在多大程度上依赖它，如果浏览器将其渲染为不同的像素并且将其关闭一个像素，那将没有任何效果。

我的问题是，在您看来，实现我想要的目标的最佳方式是什么？

如果有一个库可以满足我的需求，我也会接受它作为答案。我只是找不到任何可以让一个元素跨越多个列的东西。

Answer 1

Rafaela Ferro 写了一篇 article on medium其中详细介绍了如何使用 CSS 网格创建具有极大灵 active 的砖石样式布局。

正如@Paulie_D 推荐的那样，使用 grid-auto-flow: dense 将告诉网格填充由不均匀布局产生的任何孔洞。但是，由于您设置高度的方式，仍然会出现一些差距。

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 5px;
  max-width: 600px;
  margin: 0 auto;
  grid-auto-flow: dense;
}
  
.wrapper  div {
  background: red;
}  

.two {
  grid-column-end: span 2;
}

<div class="wrapper">
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="two" style="grid-row-end: span 4; background-color: green;"></div>
  <div class="one" style="grid-row-end: span 4"></div>
  <div class="one" style="grid-row-end: span 2"></div>
  <div class="one" style="grid-row-end: span 3"></div>
  <div class="one" style="grid-row-end: span 2"></div>
  <div class="one" style="grid-row-end: span 5"></div>
</div>