---
layout: page-fullwidth
title:  "The Grid"
subheadline:  "Multi-Device Layouts"
description: "Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. These are the dimensions."
date:  2014-07-05 07:00:00
categories:
    - design
image:
   thumb: "unsplash_7_thumb.jpg"
---
*Feeling Responsive* is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about [constructing  beautiful layouts][1] in the foundation documentation.

## Large Displays

### Two Columns

<div class="row">
  <div class="large-6 columns">
      <img src="http://placehold.it/500x281/6b6351/e1dcd7&amp;text=Width+500+Pixel">
  </div>
  <div class="large-6 columns">
      <img src="http://placehold.it/500x281/e05a10/e1e75e&amp;text=Width+500+Pixel">
  </div>
</div>

### Three Columns

<div class="row">
  <div class="large-4 columns">
      <img src="http://placehold.it/333x170/6b6351/e1dcd7&amp;text=Width+333+Pixel">
  </div>
  <div class="large-4 columns">
      <img src="http://placehold.it/333x170/e05a10/e1e75e&amp;text=Width+333+Pixel">
  </div>
  <div class="large-4 columns">
      <img src="http://placehold.it/333x170/fabb00/771e1e&amp;text=Width+333+Pixel">
  </div>
</div>



### Four Columns

<div class="row">
  <div class="large-3 columns">
      <img src="http://placehold.it/250x141/6b6351/e1dcd7&amp;text=Width+250+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/250x141/e05a10/e1e75e&amp;text=Width+250+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/250x141/fabb00/771e1e&amp;text=Width+250+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/250x141/00792c/acca57&amp;text=Width+250+Pixel">
  </div>
</div>



 [1]: http://foundation.zurb.com/docs/components/grid.html
 [2]: #
 [3]: #
 [4]: #
 [5]: #
 [6]: #
 [7]: #
 [8]: #
 [9]: #
 [10]: #