73 lines
No EOL
1.9 KiB
Markdown
73 lines
No EOL
1.9 KiB
Markdown
---
|
|
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:
|
|
- layout
|
|
- design
|
|
image:
|
|
thumb: "unsplash_7_thumb.jpg"
|
|
permalink: "/design/grid/"
|
|
---
|
|
*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&text=Width+500+Pixel">
|
|
</div>
|
|
<div class="large-6 columns">
|
|
<img src="http://placehold.it/500x281/e05a10/e1e75e&text=Width+500+Pixel">
|
|
</div>
|
|
</div>
|
|
|
|
### Three Columns
|
|
|
|
<div class="row">
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/6b6351/e1dcd7&text=Width+333+Pixel">
|
|
</div>
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/e05a10/e1e75e&text=Width+333+Pixel">
|
|
</div>
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/fabb00/771e1e&text=Width+333+Pixel">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
### Four Columns
|
|
|
|
<div class="row">
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/6b6351/e1dcd7&text=Width+250+Pixel">
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/e05a10/e1e75e&text=Width+250+Pixel">
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/fabb00/771e1e&text=Width+250+Pixel">
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/250x141/00792c/acca57&text=Width+250+Pixel">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
[1]: http://foundation.zurb.com/docs/components/grid.html
|
|
[2]: #
|
|
[3]: #
|
|
[4]: #
|
|
[5]: #
|
|
[6]: #
|
|
[7]: #
|
|
[8]: #
|
|
[9]: #
|
|
[10]: # |