From: Kevin Ball <kmball11@gmail.com>
Date: Thu, 6 Jul 2017 18:00:13 +0000 (-0700)
Subject: Merge pull request #10357 from zurb/docs/add-block-grid
X-Git-Tag: v6.4.2-rc2~1^2^2~16
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fb1990a6bf49c692703b26b5b4aef91bddc5e07c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Merge pull request #10357 from zurb/docs/add-block-grid

Added docs on block grid!
---

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index 076094187..b9f7a594e 100644
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -208,6 +208,35 @@ Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to
 
 ---
 
+## Block Grids
+
+To define cell widths within a direction-level, instead of the individual cell level, add the class `.[size]-up-[n]` to a `grid-x` or `grid-y`, where `[n]` is the number of cells to display per direction, and `[size]` is the breakpoint at which to apply the effect.
+
+<div class="primary callout">This example uses padding grid but this can be used with margin grid too.</div>
+
+<div class="docs-codepen-container">
+<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/PjBLxE?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<div class="grid-x grid-padding-x small-up-2 medium-up-4 large-up-6">
+  <div class="cell">cell</div>
+  <div class="cell">cell</div>
+  <div class="cell">cell</div>
+  <div class="cell">cell</div>
+  <div class="cell">cell</div>
+  <div class="cell">cell</div>
+</div>
+```
+
+---
+
+## Looking for Push Pull
+
+Push and pull are a bit of a hack solution and was only necessary for Float based grids. But for flexbox, this hack is not needed as [source ordering](flexbox-utilities.html#source-ordering) does this with ease.
+
+---
+
 ## Vertical Grids
 
 The XY grid also supports vertical grids. Simply apply `.grid-y` instead of `.grid-x`.