diff --git a/content/websites/patterns/grid/grid.html b/content/websites/patterns/grid/grid.html
index c8f00fa26d353d83a4b126525027f1007ead4d71..e092c3d8aef7161263a99624efe5ac6c203ad6ca 100644
--- a/content/websites/patterns/grid/grid.html
+++ b/content/websites/patterns/grid/grid.html
@@ -1,4 +1,4 @@
-{{#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>
diff --git a/content/websites/patterns/grid/grid.png b/content/websites/patterns/grid/grid.png
index 7ed9b063821569a79eaaf98d403b7f1112ca3fa8..710b66e22543e5cf99f6fae6709bf7bae05264b1 100644
Binary files a/content/websites/patterns/grid/grid.png and b/content/websites/patterns/grid/grid.png differ
diff --git a/content/websites/patterns/grid/grid.yml b/content/websites/patterns/grid/grid.yml
index b15e029fff43f4c0c563f2c7ac61ea73301dca0c..ca2205001abc52efae65352a62db7d4532e03ee0 100644
--- a/content/websites/patterns/grid/grid.yml
+++ b/content/websites/patterns/grid/grid.yml
@@ -1,11 +1,11 @@
-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
diff --git a/content/websites/patterns/grid/layout.html b/content/websites/patterns/grid/layout.html
index 73265796cbe7d172cbefb307963ad4e159fb14aa..678057164d47925ed8c11a7e2d9e5af6897bd868 100644
--- a/content/websites/patterns/grid/layout.html
+++ b/content/websites/patterns/grid/layout.html
@@ -1,29 +1,71 @@
 {{#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}}