Zurb Foundation 3 Five Columns - zurb-foundation

Question

I am testing foundation 3 framework and was wondering how i can set a row with five articles.
Does anyone have an idea to fix that?

Answer 1

One solution is to use columns of two and mark the last column as the end.
If your row doesn't have a count that adds up to 12 columns, you can
tag the last column with class="end" in order to override that
behaviour. [source]
<div class="row">
<div class="two columns">
article 1
</div>
<div class="two columns">
article 2
</div>
<div class="two columns">
article 3
</div>
<div class="two columns">
article 4
</div>
<div class="two columns end">
article 5
</div>
</div>
Alternatively if you need to use all the space you can use a block grid:
Block grids are made from a ul.block-grid with #-up styles chained to
it. You control how many you have in your Scss setting file or the
customizer. These are ideal for blocked-in content generated by an
application, as they do not require rows or even numbers of elements
to display correctly.
<ul class="block-grid five-up">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
<li>article 4</li>
<li>article 5</li>
</ul>

Answer 2

This should work in Foundation 5 (maybe 3 as well). The trick is to offset the first column and end the last.
<nav>
<div class="row">
<div class="column small-2 small-offset-1">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2 end">
<a>Link</a>
</div>
</div>
</nav>
Hope it helps someone, or a future me.