{{#markdown}}
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.
```
{{> grid}}
```
And that gives us:
{{> grid}}
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](https://foundation.zurb.com/sites/docs/grid.html#block-grids) if you have content in a repetable rows, such as thumbnails:
.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
{{/markdown}}