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

Foundationのブロックグリッドを使用する場合は、Masonryを使用することをお勧めします。ここにはguide on how to implement it with Foundationがありますが、これはFoundation 5なので、ブロックグリッドクラスの構文は若干異なります。

また、CSSカラムを使用して、column-gapプロパティを使用して同様の効果を得ることができます。 Full example here。

.parent { 
    column-gap: 30px; 
}