Menu icon Foundation
Multiple Grids on the same page?

I don't know if this is possible, but I am curious if I can have a single web page with multiple grids on it.  What I am trying to do is an article view with comments.  The top of the page would be the article view which using the standard 12-column grid.  On the bottom of the page, instead of using the standard 12-column grid, I want to use a 24-column grid which will allow me to have smaller indents in the column width for the comments.

I have been trying to follow the Multiple Grids section on this page of the documentation: http://foundation.zurb.com/sites/docs/grid.html

But when I end up using that code, it changes the entire grid-size to 24 columns for the whole page instead of just the section I want.  My code is right now exactly what is in this piece as when I add that, and then run an SCSS compilation the whole page now has a 24 column grid which obviously changes the layout I was using there.

Is what I am trying to do possible?  Or should I just make a grid of 24 and multiply everything in my 12-column grid by 2 for this page?

grid

I don't know if this is possible, but I am curious if I can have a single web page with multiple grids on it.  What I am trying to do is an article view with comments.  The top of the page would be the article view which using the standard 12-column grid.  On the bottom of the page, instead of using the standard 12-column grid, I want to use a 24-column grid which will allow me to have smaller indents in the column width for the comments.

I have been trying to follow the Multiple Grids section on this page of the documentation: http://foundation.zurb.com/sites/docs/grid.html

But when I end up using that code, it changes the entire grid-size to 24 columns for the whole page instead of just the section I want.  My code is right now exactly what is in this piece as when I add that, and then run an SCSS compilation the whole page now has a 24 column grid which obviously changes the layout I was using there.

Is what I am trying to do possible?  Or should I just make a grid of 24 and multiply everything in my 12-column grid by 2 for this page?

Rafi Benkual over 3 years ago

Yes you can! Well in Foundation 6's Sass version you can.

Here is the docs reference: http://foundation.zurb.com/sites/docs/grid.html#multiple-grids

Can you share an example of how you set it up? Ideally you would use a custom class to set this up for a specific element.

John Brumbaugh over 3 years ago

Sorry for not responding sooner, I got pulled into another part of the project.  I assume people know how that goes.

 

So I have two sections of the page, set up like so:

 

<section class="story">
    <div class="row">
        <div class="small-12 columns">
            <h1 class="s_title">TITLE</h1>
        </div>
    </div>
    <div class="row">
        <div class="small-12 columns">
            <img src="featured_image.jpg" /><br />
        </div>
    </div>
    <div class="row story_contents">
        <div class="small-2 columns">
            <div class="callout">
                Author Callout
            </div>
        </div>
        <div class="small-10 columns">
            <p>Article Body</p>
        </div>
    </div>
</section>
<section class="comments">
    <div class="row">
        <div class="small-24 columns">
            My Comment
        </div>
    </div>
    <div class="row">
        <div class="small-23 small-offset-1 columns">
            My Comment
        </div>
    </div>
    <div class="row">
        <div class="small-22 small-offset-2 columns">
            My Comment
        </div>
    </div>
</section>

And what I am trying to do here is have the indentation level of the comments be smaller than the typical row blocks so I can fit a few more levels on the screen.  I was thinking the best way to do this would be to have two different grid types with a larger column size for the comments versus the article contents which fits in perfect with the 12 column standards.

I am 100% sure I am doing the SASS code wrong here to align things, but here it is based on what I could translate from the documentation:

 

.story {
    @include grid-row(12);
}

.comments {
    margin-top: 20px;
    @include grid-row(24);
}

But then when I run this, the CSS changes all rows to be 24, and the sections don't line up since the code is set up to handle 12 columns in a row on the top and 24 on the bottom.

Any help / ideas would be appreciated! Thanks.  I am sure it something simple that I am missing as I read the documentation.