Search code examples
htmlcsszurb-foundation-5

Foundation 5 - How can I get Eight column grid


How can I implement an Eight column grid in foundation 5?

I currently have the following

<div class="container">
    <div class="row">
        <div class="large-1 columns">Today</div>
        <div class="large-1 columns">Tomorrow</div>
        <div class="large-1 columns">Wednesday</div>
        <div class="large-1 columns">Thursday</div>
        <div class="large-1 columns">Friday</div>
        <div class="large-1 columns">Saturday</div>
        <div class="large-1 columns">Sunday</div>
        <div class="large-1 columns">Monday</div>
     </div>
</div>

Container width = 1200px


Solution

  • As one of the comments pointed out, if you want to have a custom number of columns you'll need to use Sass.

    You can follow Zurb's tutorial to get Sass and Foundation working: http://foundation.zurb.com/docs/sass.html

    I would highly recommend using Foundation with Sass as it makes customization much easier. If you're not familiar with Sass, it will be a learning curve but should be definitely worth it! http://sass-lang.com/guide

    Once you have Sass working follow the example code found here: http://foundation.zurb.com/docs/components/grid.html to get your custom column numbers working.

    .custom-row-class {
      @include grid-row();
      .custom-column-class {
        @include grid-column(8);
      }
    }