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

我正在尝试创建一个砌体布局，该布局也可以跨越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并使用元素的起始位置来确定是否需要交换。例如，如果绿色框与红色框之前的起始位置相同，请交换它们。

但是我不知道我能依靠多少，如果浏览器将其呈现为不同并且以像素为单位呈现，它将没有效果。

我的问题是，您认为我完成自己想要的最好的方式是什么？

如果那里有一个图书馆可以满足我的要求，我也将其作为答案。我只是找不到任何可以使一个项目跨越多列的东西。

最佳答案

拉斐拉·费罗（Rafaela Ferro）撰写了article on medium，其中详细介绍了使用CSS网格创建砌体样式布局的方法，该方法具有极大的灵活性。

按照@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>