{{#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:
The code: ```
``` #### 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. Remove right or left padding by giving the div.column a .no-pad-right or .no-pad-left {{/markdown}}