CSS Foundation Use Different Column Count in Container

Question

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?

Answer 1

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:

.custom-row {
  @media #{$small-up} {
    $total-columns: 4 !global;
    @include grid-html-classes($size:small);
  }
}

Answer 2

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>

Codeply