Demonstration and documentation

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:

Column 75% on desktop; 77% on tablet/phone
Column 33% on desktop; 100% on tablet/phone

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.

Block 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>

EBI Customisations