Improve grid documentation

content/websites/patterns/grid/grid.html

-{{#markdown}}
-  ``` html
-  ```
-{{/markdown}}
+<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>

content/websites/patterns/grid/grid.yml

-name: 'Grid'
+name: 'Grid and blocks'
 tags:
   - grid
   - layout
 category: containers
-description: Formatting content layout
+description: Arrange you content responsive rows.
 versions:
-  - 1.1.0, 1.2.0
+  - 1.1.0, 1.2.0, 1.3.0
 author:
   name: Ken Hawkins
   github: khawkins98

content/websites/patterns/grid/layout.html

 {{#markdown}}
-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.
+Start by adding an element with a class of <code>.row</code> to create a horizontal block fo columns. Then add <code>div.columns</code> 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>
+The EBI Framework uses a 12 column grid.
 
-<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>
+```
+{{> grid}}
+```
 
-<p>Note that by using <code>.medium-</code> the two columns automatically expand to full width on small screens (mobile devices).</p>
+And that gives us:
+{{> grid}}
 
-<p>For further background and demonstration, <a href="http://foundation.zurb.com/sites/docs/grid.html">view the Foundation documentation on grids</a>.</p>
+By using <code>.medium-</code> the two columns automatically expand to full width on small screens (mobile devices). For further background and demonstration, <a class="readmore" href="http://foundation.zurb.com/sites/docs/grid.html">view the Foundation documentation on grids</a>.
 
-<h3>EBI Customisations</h3>
+### Block grids
 
-<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>
+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:
 
-<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>
+<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>
 
-<div class="row">
-  <div class="column">
-    {{> grid}}
+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
+
+- **Collapse column padding:** 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. Remove right or left padding by giving the <code>div.column</code> a <code>.no-pad-right</code> or <code>.no-pad-left</code>
+
+
 
 {{/markdown}}