Start by adding an element with a class of .row
to create a horizontal block fo columns. Then add div.columns
within that row (you can use .column
or .columns
—the only difference is grammar). Specify the widths of each column with the .small-#
, .medium-#
, and .large-#
classes.
The EBI Framework uses a 12 column grid.
<div class="row">
<div class="columns medium-8 callout">Column 75% on desktop; 77% on tablet/phone</div>
<div class="columns medium-4 callout industry-background">Column 33% on desktop; 100% on tablet/phone</div>
</div>
And that gives us:
By using .medium-
the two columns automatically expand to full width on small screens (mobile devices). For further background and demonstration, view the Foundation documentation on grids.
You can also make use of Foundation's block grids if you have content in a repetable rows, such as thumbnails:
The code:
<div class="row small-up-2 medium-up-3 large-up-4">
<div class="column column-block">
<img src="https://placehold.it/600x100">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x100">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x100">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x100">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x100">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x100">
</div>
</div>
.no-collapse
option on grid rows, we've found that our layouts benefit from collapsing column padding in some locations. Remove right or left padding by giving the div.column
a .no-pad-right
or .no-pad-left