カラムが崩壊する

Question

ファンデーションの奇形グリッドを使用しているときに、いくつかのランダムなカラムが崩壊するのはなぜですか？

<div class="small-centered"> 
    <div class="row small-12 small-centered"> 
     <?php foreach ($videos as $video): ?> 
      <div class="column small-6 medium-4 large-4"> 
       <div>short text</div> 
       <img src="https://placehold.it/150x150" /> 
      </div> 
     <?php endforeach; ?> 
    </div> 
</div> 

空白領域は空のdivではありません。

編集：ここにHTMLとCSS出力が

Answer 1

編集：

あなたの最後の要素に.endを追加する必要があります。あなたはそれを少し調整する必要があるかもしれません（カウンタを使用して、このようなあなたのforeachループを変更します。

<?php 
$i = 0; 
$len = count($videos); 
foreach ($videos as $video): 
    if ($i == $len - 1) { 
     echo '<div class="column large-4 end">'; //this is the last 
    } else { 
     echo '<div class="column large-4">'; // if not last-echo normally... 
    } ?> 
        <div>short text</div> 
        <img src="https://placehold.it/150x150" /> 
       </div> 
    <?php $i++; 
endforeach; ?>