基礎6不等高元素的塊網格

Question

在基礎6塊網格中，如何製作緊接在其父元素之後放置的非等高元素的網格。

實施例（圖像） 因此，所有的底灰色塊向上移動到橙色塊所處的位置，而不是對自己換行符

<div class="row small-up-1 medium-up-6 large-up-4"> 
    <div class="column column-block f1" style="height: 100px;"> 
     <div> 
      <h1>block 1</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1" style="height: 250px;"> 
     <div> 
      <h1>block 2</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 3</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1" style="height: 175px;"> 
     <div> 
      <h1>block 4</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 5</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 6</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 7</h1> 
      <p></p> 
     </div> 
    </div> 
</div> 

是如果這是不可能的基礎上，他們比任何人都可以建議採用這種技術嗎？

在此先感謝大家。

Answer 1

如果你想使用基金會的塊網格，我建議使用Masonry。這是一個guide on how to implement it with Foundation，但請注意這是Foundation 5，因此您的塊網格類的語法將略有不同。

或者，您可以使用CSS列實現類似的效果，利用column-gap屬性。 Full example here。

.parent { 
    column-gap: 30px; 
}