From e6ebc731dae1735da190b3040f267af65f250c41 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Thu, 6 Jul 2017 11:00:13 -0700 Subject: [PATCH] Merge pull request #10357 from zurb/docs/add-block-grid Added docs on block grid! --- docs/pages/xy-grid.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md index 863bddd75..5d8c02054 100644 --- a/docs/pages/xy-grid.md +++ b/docs/pages/xy-grid.md @@ -203,6 +203,29 @@ 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. + +
This example uses padding grid but this can be used with margin grid too.
+ +
+edit on codepen button +
+ +```html_example +
+
cell
+
cell
+
cell
+
cell
+
cell
+
cell
+
+``` + +--- + ## 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. -- 2.47.2