Zurb Foundation - Grid System
Grid Systems are being used to guide design for more than a century for magazines. Recently it was implemented in web design using CSS.
A grid system is an invisible foundation of web page layout, which is used to divide the web page multiple grids.
Zurb Foundation framework provides a powerful12-column, nestable Foundation grid through which multi-device layouts can be created quickly and easily.
Foundation grid increased and decreased based on the browser width. Bootstrap has set of pre-defined grid sizes for screens and main devices. Both grid systems have all of the advanced features such as nesting, offsets and pushing/pulling. The zurb foundation grid specify width each coumn with the small, medium and large.
Foundation 5.0 is a mobile first approach. So we want to code for small screens first, and we can inherit those styles for large screens.
HTML Code
<div class="row"> <div class="small-4 large-6 columns">6</div> <div class="small-8 large-6 columns">6</div> </div> <div class="row"> <div class="small-3 large-5 columns">5</div> <div class="small-9 large-7 columns">7</div> </div> <div class="row"> <div class="small-4 columns">4</div> <div class="small-8 columns">8</div> </div> <div class="row"> <div class="large-4 columns">4</div> <div class="large-4 columns">4</div> <div class="large-4 columns">4</div> </div> <div class="row"> <div class="small-2 large-3 columns">3</div> <div class="small-4 large-6 columns">6</div> <div class="small-8 large-3 columns">3</div> </div> <div class="row"> <div class="small-2 columns">2</div> <div class="small-8 columns">8</div> <div class="small-2 columns">2</div> </div>
Output
Nesting in Grid
The Foundation Grid allows nesting your content with default grid. You can create complex grid by using nested grid.
HTML Code
<div class="row"> <div class="small-8 columns">8 <div class="row"> <div class="small-8 columns">8 Nested <div class="row"> <div class="small-8 columns">8 Nested Again</div> <div class="small-4 columns">4</div> </div> </div> <div class="small-4 columns">4</div> </div> </div> <div class="small-4 columns">4</div> </div>
Output
Offset
We can create extra space between columns in a row using classes like .large-offset-1 and .small-offset-3.
HTML Code
<div class="row"> <div class="large-1 columns">1 </div> <div class="large-11 columns">11 column</div> </div> <div class="row"> <div class="large-1 columns">1 </div> <div class="large-10 large-offset-1 columns">10 column, offset 1</div> </div> <div class="row"> <div class="large-1 columns">1 </div> <div class="large-9 large-offset-2 columns">9 column, offset 2</div> </div> <div class="row"> <div class="large-1 columns">1 </div> <div class="large-8 large-offset-3 columns">8 column, offset 3</div> </div>
Output
Centered Columns
Foundation Grid allows user to create columns in the middle of row by using small-centered and large-centered classes.
HTML Code
<div class="row"> <div class="small-9 small-centered columns">9 centered</div> </div> <div class="row"> <div class="small-6 large-centered columns">6 centered</div> </div> <div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> <div class="row"> <div class="small-11 small-centered large-uncentered columns">11 centered</div> </div>
Output
Source Ordering
In source ordering, we can easily change order of grids by using small-push-#, small-pull-#, medium-push-#, medium-pull-#, large-push-#, and large-pull-# classes.
HTML Code
<div class="row"> <div class="small-6 small-push-6 columns">6 First</div> <div class="small-6 small-pull-6 columns">6 Last</div> </div> <div class="row"> <div class="large-8 large-push-4 columns">8 First</div> <div class="large-4 large-pull-8 columns">4 last</div> </div> <div class="row"> <div class="medium-9 medium-push-3 columns">9 First</div> <div class="medium-3 medium-pull-9 columns">3 Last</div> </div> <div class="row"> <div class="small-4 small-push-8 large-8 medium-push-4 columns">8 First</div> <div class="small-8 small-pull-4 large-4 medium-pull-8 columns">4 last</div> </div>
Output
Block Grid
Zurb Foundation provides block grid that split contents evently of a list by using block-gird-# class.
HTML Code
<ul class="small-block-grid-3"> <li><img src="img/1.jpg" alt="image1"></li> <li><img src="img/2.jpg" alt="image2"></li> <li><img src="img/3.jpg" alt="image3"></li> </ul>