How to make 5 column row in zurb 5 foundation

Question

I want to have a 5 column in row and only 1 column for small devices screens with less then 480px width.

I am new to zurb foundation and still learning about it.

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

Is it better to this kind of thing with columns or list ul li

Answer 1

The foundation grid is based on 12 "units" per row. In your example you have 5 <div> with classes medium-3 and large-3 = 15 units per row. Foundation will manage to fit the first 4 in (4 * 3 = 12 units), and then the fifth will be pushed to the line below.

One idea to fit in your 5 items, is to give everything a medium-2 width (10 units), and offset the row by one unit on the left (class medium-offset-1 on first element) and tell Foundation that the fifth element is the last in your row (with class end on the last element).

For example:

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

The point of the medium-offset-1 is to centre the content (after a fashion): you have 10 units to fit into a possible 12. Offsetting by one, and using end will leave you with a 1 unit gap on each side of your content. However, if you want it to sit to the left of your page just remove the medium-offset-1 class from the example above.

Note - You really only need the medium-2 and medium-offset-2 here as by default this applies to large grids too, unless overriden by classes large-* or large-offset-*.

Answer 2

Maybe I am a little late to the party, but if you are using scss, you can achieve this easily.

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

Then in your 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>

Actually you can have any number of column you need. Just pass the argument (12/[required number of column])