I'm using the ZURB Foundation package, which relies on the grid system of 12 total columns. I don't want to change the total column count for the entire project, but rather just for one element's contents. How can I change say a <row>
to use an 8 column count as opposed to a 12 column count?
CSS Foundation Use Different Column Count in Container
308 views Asked by Brian Leishman At
2
There are 2 answers
2
On
You can use nested rows to implement 8 columns structure. Divide the row into two columns and then the column into 4 columns included inside rows.
<div class="row">
<div class="large-6 columns">
<div class="row">
<div class="large-3 columns">
1
</div>
<div class="large-3 columns">
2
</div>
<div class="large-3 columns">
3
</div>
<div class="large-3 columns">
4
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-3 columns">
5
</div>
<div class="large-3 columns">
6
</div>
<div class="large-3 columns">
7
</div>
<div class="large-3 columns">
8
</div>
</div>
</div>
</div>
Taking a cue form this Foundation Forum post http://foundation.zurb.com/forum/posts/22254-change-total-columns-on-small-only
You could create a custom class for this type of row: