Foundation Grid - Horizontal Stacking
The following example creates a basic grid system that tiles horizontally on PCs and tablets, and stacks on small devices such as phones.
Example
<div
class="row">
<div class="medium-6 columns" style="background-color:yellow;">
<p>Example</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>Example</p>
</div>
</div>
<div class="medium-6 columns" style="background-color:yellow;">
<p>Example</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>Example</p>
</div>
</div>
Try it Yourself »
 |
Tip: .small|medium|large-*The number in the class specifies the number of columns to span. So,.small-1Span 1 column,.small-4Span 4 columns,.small-6Spanning 6 columns (50% width), etc.Note:Make sure the numbers add up to 12 columns! |
|---|