Grids

Multiple grid types which includes margin grid, padding grid, frame grid, block grid and vertical grid - https://foundation.zurb.com/sites/docs/xy-grid.html


2-Column Grid

<div class="grid-x grid-margin-x grid-padding-y">

<div class="cell small-12 medium-6 large-6">PLACE IMAGE HERE</div>
<div class="cell small-12 medium-6 large-6">PLACE IMAGE HERE</div>

</div>
                    
Placeholder: 600x400
Placeholder: 600x400

3-Column Grid

<div class="grid-x grid-margin-x grid-padding-y">
<div class="cell small-12 medium-4 large-4">INSERT TEXT HERE</div>
<div class="cell small-12 medium-4 large-4">INSERT TEXT HERE</div>
<div class="cell small-12 medium-4 large-4">INSERT TEXT HERE</div>
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

4-Column Grid

<div class="grid-x grid-margin-x grid-padding-y">

<div class="cell small-6 medium-6 large-3">PLACE IMAGE HERE</div>
<div class="cell small-6 medium-6 large-3">PLACE IMAGE HERE</div>
<div class="cell small-6 medium-6 large-3">PLACE IMAGE HERE</div>
<div class="cell small-6 medium-6 large-3">PLACE IMAGE HERE</div>
</div>

 

Placeholder: 600x400
Placeholder: 600x400
Placeholder: 600x400
Placeholder: 600x400

Auto Sizing Grids

<div class="grid-x grid-margin-x grid-padding-y">

<div class="cell small-12 medium-4 large-4">PLACE IMAGE HERE;</div>
<div class="cell small-12 medium-auto large-auto">PLACE IMAGE HERE;</div>
</div>
Placeholder: 600x400
Placeholder: 600x400