From 16b7677a1d3efdc02d55bf5c58e97aba2dcc211f Mon Sep 17 00:00:00 2001
From: Brett Mason <brettsmason@users.noreply.github.com>
Date: Wed, 28 Sep 2016 15:40:02 +0100
Subject: [PATCH] Update grid.md with grid-layout options

Added a custom block grid writeup to the grid.md docs.
---
 docs/pages/grid.md | 49 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 7e0517a01..32336f09b 100644
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -564,3 +564,52 @@ Refer to the Sass documentation below to learn how each mixin works.
   }
 }
 ```
+### Custom Block Grid
+
+Use the `grid-layout()` mixin to create your own block grid.
+By default the mixin takes 3 parameters:
+- Number of columns
+- The child element selector
+  - An optional padding value
+
+The padding value can be set to `$grid-column-gutter` to use the values from that map.
+This will then generate different paddings at different breakpoints. Alternatively supply a numeric value (without a unit type) to output a static rem value.
+
+Here's an example:
+
+```scss
+.gallery {
+  @include grid-layout(3, '.gallery-item', $grid-column-gutter);
+}
+```
+That outputs this CSS:
+
+```
+.gallery > .gallery-item {
+  width: 33.33333%;
+  float: left;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+@media screen and (min-width: 40em) {
+  .gallery > .gallery-item {
+    padding-left: 0.9375rem;
+    padding-right: 0.9375rem;
+  }
+}
+
+.gallery > .gallery-item:nth-of-type(1n) {
+  clear: none;
+}
+
+.gallery > .gallery-item:nth-of-type(3n+1) {
+  clear: both;
+}
+
+.gallery > .gallery-item:last-child {
+  float: left;
+}
+```
+
+---
-- 
2.47.3