Foundation 6 bloc-grille d'éléments de hauteur non égaux

Question

Dans la base 6 block-grille, comment peut-on faire une grille d'éléments de hauteur non égaux qui est placé immédiatement après leur parent.

Exemple (image) Ainsi, tous les blocs gris bas se déplace jusqu'à l'endroit où les blocs orange sont, au lieu d'être sur leur propre newline

<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> 

Si cela est impossible dans la fondation, est leur que quiconque peut conseiller pour une technique qui permet cela?

Merci d'avance à tous.

Answer 1

Si vous souhaitez utiliser la grille de blocs de Foundation, je conseille d'utiliser Masonry. Voici un guide on how to implement it with Foundation, mais notez que c'est Foundation 5, donc votre syntaxe pour les classes de la grille de blocs sera légèrement différente.

Vous pouvez également utiliser des colonnes CSS pour obtenir un effet similaire, en utilisant la propriété column-gap. Full example here.

.parent { 
    column-gap: 30px; 
}