なぜ小6がこのFoundation 6.4コードで動作していないのですか？

Question

私はレイアウトを使って作業していましたZurb Foundation 6.4フレームワーク私は3枚のカードに3列の320x180ピクセルの画像があります。私はそれが小さな画面で表示されるとき、各行に2枚のカードがあることを望む。

大規模なビュー3列では期待どおりに動作しています。しかし、小さなビューでは2列またはカードが必要ですが、1枚のカードまたは1列を表示しています。

Codepen：https://codepen.io/coolsaint/pen/LzbpOy

私は何が起こっているかを把握することができないのです。誰も私の問題を解決する方法を教えてもらえますか？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" /> 
 

 
<div class="grid-container"> 
 
    <div class="grid-x small-6 large-4 align-center"> 
 

 

 
    <div class="cell shrink"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    <div class="cell shrink"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    <div class="cell shrink"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    
 

 

 
    </div> 
 
</div>

Answer 1

このようなcellクラスの要素で使用small-6 large-4クラスを、

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" /> 
 

 
<div class="grid-container"> 
 
    <div class="grid-x align-center"> 
 

 

 
    <div class="cell shrink small-6 large-4"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    <div class="cell shrink small-6 large-4"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    <div class="cell shrink small-6 large-4"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    
 

 

 
    </div> 
 
</div>