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网格创建砌体样式布局，从而提供了极大的灵活性。

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

可以跨越多列的砌体布局

1 个答案: