Custom grid in foundation?

Question

I need a different sized grid within the standard grid layout.

I'm using sass and have tried:

.row-30{
    @include grid-row($total-columns: 30);
}

Here's the HTML:

<div class="row-30">
    <div class="small-5 columns">a 5 col</div>
    <div class="small-1 columns end">a 1 col</div>
</div>

I'm having no luck though. Where am I going wrong with this mixin?

Answer 1

I think you also need to bring in the grid-html-classes for the size you want..

$total-columns: 30;

.row-30 {
    @include grid-row($total-columns);
    @include grid-html-classes($size:small);
}

Demo: http://codeply.com/go/QIvdO5M7Tz