Grid

Formatting content layout

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a .column class 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.

For example: The EBI Framework uses a 12 column grid. This page has a 9/12 left column, and 3/12 right column; the structure:

<div class="row">
<div class="columns medium-9"> Main left column </div>
<div class="columns medium-3"> Right sidebar </div>
</div>

Note that 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.

EBI Customisations

Collapse column padding

In addtion to using the Foundation .no-collapse option on grid rows, we've found that our layouts benefit from collapsing column padding in some locations.

You can remove right or left padding by giving the div.column a .no-pad-right or .no-pad-left

Grid HTML

Start by adding an element with a class of <code>.row</code>. This will create a horizontal block to contain vertical columns. Then add elements with a <code>.column</code> class within that row. You can use <code>.column</code> or <code>.columns</code>&mdash;the only difference is grammar. Specify the widths of each column with the <code>.small-#</code>, <code>.medium-#</code>, and <code>.large-#</code> classes.

<p>For example: The EBI Framework uses a 12 column grid. This page has a 9/12 left column, and 3/12 right column; the structure:</p>

<pre class="callout">
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;columns medium-9&quot;&gt; Main left column &lt;/div&gt;
&lt;div class=&quot;columns medium-3&quot;&gt; Right sidebar &lt;/div&gt;
&lt;/div&gt;</pre>

<p>Note that by using <code>.medium-</code> the two columns automatically expand to full width on small screens (mobile devices).</p>

<p>For further background and demonstration, <a href="http://foundation.zurb.com/sites/docs/grid.html">view the Foundation documentation on grids</a>.</p>

<h3>EBI Customisations</h3>

<h4>Collapse column padding</h4>
<p>In addtion to using the Foundation <code>.no-collapse</code> option on grid rows, we've found that our layouts benefit from collapsing column padding in some locations.</p>

<p>You can remove right or left padding by giving the <code>div.column</code> a <code>.no-pad-right</code> or <code>.no-pad-left</code></p>

Grid Style

You can find the original source of the CSS as .scss

Grid

  • Last updated: 27 Jun 2016
  • Source

Have a use case that's not covered?

Please open an issue in the tracker. We'll update this living pattern library with your feedback.

All patterns

See also

These resources will help you engage and understand the EBI Framework.