---
layout: page-fullwidth
title:  "Grid & Colors"
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/220x141/6b6351/e1dcd7&amp;text=Width+220+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/220x141/e05a10/e1e75e&amp;text=Width+220+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/220x141/fabb00/771e1e&amp;text=Width+220+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/220x141/00792c/acca57&amp;text=Width+220+Pixel">
  </div>
</div>


## Colors

<div class="row">
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/E4E4E4/ffffff&amp;text=Grey+E4E4E4">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/D7D7D7/ffffff&amp;text=Grey+D7D7D7">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/CBCBCB/ffffff&amp;text=Grey+CBCBCB">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/BEBEBE/ffffff&amp;text=Grey+BEBEBE">
</div>
</div>

<div class="row">
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/A4A4A4/ffffff&amp;text=Grey+A4A4A4">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/979797/ffffff&amp;text=Grey+979797">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/8B8B8B/ffffff&amp;text=Grey+8B8B8B">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/7E7E7E/ffffff&amp;text=Grey+7E7E7E">
</div>
</div>

<div class="row">
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/646464/ffffff&amp;text=Grey+646464">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/575757/ffffff&amp;text=Grey+575757">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/4B4B4B/ffffff&amp;text=Grey+4B4B4B">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/3E3E3E/ffffff&amp;text=Grey+3E3E3E">
</div>
</div>

<div class="row">
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/313131/ffffff&amp;text=Grey+313131">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/242424/ffffff&amp;text=Grey+242424">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/171717/ffffff&amp;text=Grey+171717">
</div>
<div class="large-3 columns bottom-30">
<img src="http://placehold.it/220/0B0B0B/ffffff&amp;text=Grey+0B0B0B">
</div>
</div>


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