## Gutters
The defining feature of the XY grid is the ability to use margin AND padding grids in harmony.
-To define a grid type, simply set `.grid-margin-x` or `.grid-padding-x` on the grid.
+To define a grid type, simply set `.grid-margin-x`/`.grid-margin-y` or `.grid-padding-x`/`.grid-padding-y` on the grid.
<p>
<a class="" data-open-video="5:43"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
## Grid Container
-The grid defaults to the full width of the available space. To contain it use the `grid-container` class. The container will be centered and have a max-width equal to your `$grid-container` setting (1200px by default), along with padding on the left/right equal to half your `$grid-container-padding` setting.
+The grid defaults to the full width of the available space. To contain it horizontally use the `grid-container` class. The container will be centered and have a max-width equal to your `$grid-container` setting (1200px by default), along with padding on the left/right equal to half your `$grid-container-padding` setting.
```html
<div class="grid-container">
---
-## Collapse Cells
+## Collapse Cells <span class="label secondary">X Grid only</span>
The `.[size]-[gutter-type]-collapse` class lets you remove cell gutters.
---
-## Offsets
+## Offsets <span class="label secondary">X Grid only</span>
-Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to a grid.
+Offsets work by applying `margin-left` to a grid.
```html_example
<div class="grid-x grid-margin-x">
---
-## Block Grids
+## Block Grids <span class="label secondary">X Grid only</span>
To define cell widths within a direction-level, instead of the individual cell level, add the class `.[size]-up-[n]` to a `grid-x`, where `[n]` is the number of cells to display per direction, and `[size]` is the breakpoint at which to apply the effect.
}
},
"foundation-docs": {
- "version": "git+https://github.com/zurb/foundation-docs.git#9a50a61c04ae5325e0441d0b7adb880c42c9c2ff",
- "from": "git+https://github.com/zurb/foundation-docs.git#9a50a61c04ae5325e0441d0b7adb880c42c9c2ff",
+ "version": "github:zurb/foundation-docs#96ea89b6289767ed5e285ae037489d5c8f253b39",
+ "from": "github:zurb/foundation-docs#96ea89b6289767ed5e285ae037489d5c8f253b39",
"dev": true,
"requires": {
"cheerio": "^1.0.0-rc.2",
}
},
"marked": {
- "version": "0.5.1",
- "resolved": "https://registry.npmjs.org/marked/-/marked-0.5.1.tgz",
- "integrity": "sha512-iUkBZegCZou4AdwbKTwSW/lNDcz5OuRSl3qdcl31Ia0B2QPG0Jn+tKblh/9/eP9/6+4h27vpoh8wel/vQOV0vw==",
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/marked/-/marked-0.5.2.tgz",
+ "integrity": "sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA==",
"dev": true
},
"matchdep": {
"corejs-typeahead": "^1.1.1",
"cz-conventional-changelog": "^2.1.0",
"doiuse": "~4.1.0",
- "foundation-docs": "git+https://github.com/zurb/foundation-docs.git#9a50a61c04ae5325e0441d0b7adb880c42c9c2ff",
+ "foundation-docs": "github:zurb/foundation-docs#96ea89b6289767ed5e285ae037489d5c8f253b39",
"gulp": "^4.0.0",
"gulp-add-src": "^1.0.0",
"gulp-babel": "^8.0.0",