From: Geoff Kimball <geoff@zurb.com>
Date: Fri, 4 Mar 2016 22:47:15 +0000 (-0800)
Subject: Add docs page for block grid
X-Git-Tag: v2.0.0-rc.3~12^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e0f932811d45fc758797b6dbb29a9d8eb1184ab9;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Add docs page for block grid
---

diff --git a/docs/pages/block-grid.md b/docs/pages/block-grid.md
new file mode 100644
index 00000000..bd4f832b
--- /dev/null
+++ b/docs/pages/block-grid.md
@@ -0,0 +1,24 @@
+---
+title: Block Grid
+description: Use the block grid to create a gallery of items.
+sass: scss/grid/_block-grid.scss
+---
+
+## Overview
+
+Block grids display a number of evenly-spaced items in a row, automatically stacking on smaller screens without using media queries. While the normal grid should be used for broader layout, the block grid is useful for creating galleries of content that span multiple rows.
+
+The wrapper of a block grid is a `<table>` with the class `.block-grid`, and a `<tr>`. Each element is a `<td>`. The number of items per row is defined by a class on the `<table>` called `.up-[n]`, where `[n]` is the number of items to display per row. You can have up to 8 items per row.
+
+In Inky HTML, use the `<block-grid>` tag with the attribute `up="n"`, where `n` is the number of items per row.
+
+```inky
+<block-grid up="3">
+  <td>Item 1</td>
+  <td>Item 2</td>
+  <td>Item 3</td>
+  <td>Item 4</td>
+  <td>Item 5</td>
+  <td>Item 6</td>
+</block-grid>
+```