layout-lv3

Objective

Create a grid based layout that responds based on mobile or tablet.

Create a grid-block

Add a div.grid-block inside a screen (section.grid-content).

<div class="grid-block"></div>

Using Grid Classes

Inside of the .grid-block create an element an add a grid class.

Grid Classes include small, medium, and large. The number of columns is 1-12.

<div class="grid-block">
   <div class="small-6 medium-4 large-3">Block 1</div>
   <div class="small-6 medium-4 large-3">Block 2</div>
   <div class="small-6 medium-4 large-3">Block 3</div>

</div>

foundation-grid-system

A sample layout using Grid Classes.

Responsive Sizing

Every screen has 12 columns of space. Notice the class “small-6” on the div.card. This means that on a small screen the element will occupy 6 columns of space.

Add the class “medium-4”. This will change the size from 6 columns to 4 columns when viewed on a medium screen like a tablet.

Bonus: Using a Card

<div class="card small-6">
  <img src="http://placekitten.com/g/400/200">
  <div class="card-section">
  <h4>
     Layout Level 1
  </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi iusto reprehenderit voluptatem odio deleniti provident aliquam qui magnam aspernatur necessitatibus.</p>
  </div>
  <div class="card-divider">
     App Design
  </div>
</div>

Future Reading

See the Zurb Foundation for Apps documentation for more about Grid Layout.
http://foundation.zurb.com/apps/docs/#!/grid