Search code examples
sasszurb-foundationzurb-foundation-5

Custom grid in foundation?


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?


Solution

  • 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