web-dev-qa-db-ja.com

zurb5ファンデーションで5列の行を作成する方法

rowに5列、幅が480px未満の小さなデバイス画面には1列だけにしたい。

私はzurbFoundationに不慣れで、まだそれについて学んでいます。

フィドルの例 http://jsfiddle.net/V7TuY/1/

<div class="row">
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 2]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 3]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 4]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 5]" />
        <p></p>
    </div>

この種の列またはリストを使用する方がよいでしょうかul li

htmlcsszurb-foundation
17
Learning

基礎グリッドは1行あたり12の「ユニット」に基づいています 。あなたの例では、5つの<div>とクラスmedium-3およびlarge-3 = 15ユニット/行があります。 Foundationは最初の4インチ（4 * 3 = 12ユニット）に収まり、5番目は下の行にプッシュされます。

5つの項目に収まる1つのアイデアは、すべてにmedium-2幅（10単位）を与え、行を左側に1 unitオフセットすることです（クラス medium-offset-1最初の要素 ）そして、5番目の要素が行の最後であることをFoundationに伝えます（クラス 最後の要素のend ）。

例えば：

<div class="row">

  <div class="small-12 medium-2 medium-offset-1 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns end">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>

</div>

http://jsfiddle.net/V7TuY/4/

medium-offset-1のポイントは、コンテンツを中央に配置することです（ファッションの後）。可能な12に収まる10ユニットがあります。1でオフセットし、endを使用すると1ユニットになります。コンテンツの両側にギャップがあります。ただし、ページの左側に配置する場合は、上記の例からmedium-offset-1クラスを削除してください。

注-ここで必要なのはmedium-2とmedium-offset-2だけです。これは、クラスlarge-*またはlarge-offset-*によってオーバーライドされない限り、デフォルトではlargeグリッドにも適用されます。

17
msturdy

パーティーに少し遅れているかもしれませんが、scssを使用している場合は、これを簡単に実現できます。

.col5-unit{
  @include grid-column(2.4); // (12/5 = 2.4)
}

次に、HTMLで

<div class="row">
  <div class="col5-unit"> Column 1 </div>
  <div class="col5-unit"> Column 2 </div>
  <div class="col5-unit"> Column 3 </div>
  <div class="col5-unit"> Column 4 </div>
  <div class="col5-unit"> Column 5 </div>
</div>

実際には、必要な列をいくつでも持つことができます。引数を渡すだけです(12/[required number of column])

11
Broncha

このような？ http://jsfiddle.net/PZuLm/

<div class="row">   
        <div class="small-12 medium-2 medium-offset-1  columns">   
          <img src="http://placehold.it/480x600&text=[img 1]"/>
        </div>     
        <div class="small-12 medium-2 columns">
           <img src="http://placehold.it/480x600&text=[img 2]"/>         
        </div>
        <div class="small-12 medium-2 columns">  
           <img src="http://placehold.it/480x600&text=[img 3]"/>    
        </div>
        <div class="small-12 medium-2 columns">    
           <img src="http://placehold.it/480x600&text=[img 4]"/>
        </div>
        <div class="small-12 medium-2 medium-pull-1 columns">    
           <img src="http://placehold.it/480x600&text=[img 5]"/> 
        </div>   
</div>
3
JAre

ブロックグリッドを試すことができます： http://foundation.zurb.com/docs/components/block_grid.html 。これをJSFiddleに追加しました：

<ul class="small-block-grid-1 medium-block-grid-5 large-block-grid-5">
<li><!-- Your content goes here -->1</li>
<li><!-- Your content goes here -->2</li>
<li><!-- Your content goes here -->2</li> 
<li><!-- Your content goes here -->4</li>
<li><!-- Your content goes here -->5</li> 
</ul>
1
Nathaniel Flick

Sassバージョンを使用している場合は、_ settings.scssに$ total-columnsという変数があります。これはデフォルトで12に設定されています。これを10に変更してから、次のようなhtmlを使用できます。

<div class="row">

  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>

</div>
0
Gavin Bruce

gavinが提示したアイデアをさらに拡張して、通常のシステム内で使用できる別のグリッド全体を作成する完全なミックスインを作成できます。次のようなことをしてください。

.alternative_grid {
  $total-columns:10;
  @include grid-row();
  @include grid-html-classes($size:large);
  $total-columns:10;
}

次に、footer_gridクラスを行に追加すると、全体で12グリッド（標準であるため）と特別な場合に10グリッドの両方を使用できるようになります。

0
Gray Ayer