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

46
86
35
97
4
8
full4
full4
full4
23
46
83
2
8
2

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

8
8 Nested
8 Nested Again
4
4
4

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

1
11 column
1
10 column, offset 1
1
9 column, offset 2
1
8 column, offset 3

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

9 centered
6 centered
3 centered
11 centered

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

6 First
6 Last
8 First
4 last
9 First
3 Last
8 First
4 last

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>

Output

  • image1
  • image2
  • image3

Next Lesson > Foundation Typography