How do i implement a fixed column grid in zurb foundation 3? Currently, foundation's grid is fluid and are based on percentages. I want to implement something similar to the bootstrap (non-fluid) grid whereby there are only 4 posibilites on how your grid is displayed (well at least until it drops down to mobile, which is fluid)

I want to keep the functionalities (and semantics) of the foundation grid so i dont want to simply swap it out for the bootstrap grid.

I know this goes against the theory of a pure "responsive" grid but dealing with real world clients and their demands has made me lean towards having a finite set of grid behaviours that are predictable (adaptive grid?)

How do i implement a fixed column grid in zurb foundation 3? Currently, foundation's grid is fluid and are based on percentages. I want to implement something similar to the bootstrap (non-fluid) grid whereby there are only 4 posibilites on how your grid is displayed (well at least until it drops down to mobile, which is fluid)

I want to keep the functionalities (and semantics) of the foundation grid so i dont want to simply swap it out for the bootstrap grid.

I know this goes against the theory of a pure "responsive" grid but dealing with real world clients and their demands has made me lean towards having a finite set of grid behaviours that are predictable (adaptive grid?)

• javascript
• html
• css
• responsive-design
• zurb-foundation

Share Improve this question Follow edited Sep 17, 2012 at 15:46 Jeele Yah asked Sep 14, 2012 at 5:43 Jeele YahJeele Yah 45711 gold badge77 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to reset the columns and row widths in the CSS to fixed positions in an override @media declaration. For instance where you have

.row { width: 100%;}
.one, .row .one { width: 8.33333%; }    
.two, .row .two { width: 16.66667%; }    
.three, .row .three { width: 25%; }

you would now need,

@media screen and min-width(960px){
    .row { width: 960px;}
    .one, .row .one { width: 80px /* 960 x 8.33333% */ }    
    .two, .row .two { width: 160px; /* 960 x 8.33333% */}    
    .three, .row .three { width: 240px; /* 960 x 8.33333% */}
}

Below was the previous answer before the updated question.

Add a wrapper div around the page

<div class="wrapper">
<!-- Page content and styles go here -->
</div>

and then in your CSS you should include

.wrapper {
    width: 98%; 
    max-width: 1200px;
}

In order to prevent row scaling you need to put the following into your app.css:

.row { max-width: none; }

This will make row width fixed for all viewports above 767px (767px is default mobile grid breakpoint).

In case you need your grid adjustable in several fixed steps try using media queries:

@media screen and (min-width: 768px) and (max-width: 940px) {
  .row { width: 840px; }
}

@media screen and (min-width: 941px) and (max-width: 1050px) {
  .row { width: 960px; }
}