adding gutter class to grid blocks

[TravisMullen]

Adding .gutters class to grid-block so that you can apply spacing between columns for easier implementation of background related styles requiring equal height. One of the benefits of flex is to maintain equal height columns that are dynamic based on content, but currently when using the Manual sizing grid there is no way to allow for gutters so you have to nest elements which impedes the ability to have full (stretch) height flex blocks/items.

This will work for both manual and default flex grid and use the $global-spacing variable as !default.

When using .wrap ideally the align-items should be set to stretch and not flex-start, but I will manage that locally and submit as a separate request as I think it should be .wrap with full height stretch should be supported regardless if the gutters class adopted.

Practical Examples

Custom .scss to be shared by all practical examples below

.bg-fill-color {
    background-color: cyan;
}
.wrap {
    &.grid-block {
        &.gutters {
            align-items: stretch; // override `flex-start`
        }
    }
}

Flex grid

<div class="grid-block gutters">
  <div class="shrink grid-block bg-fill-color">Hello</div>
  <div class="grid-block bg-fill-color">World</div>
</div>

Manual Sizing grid

<div class="grid-block gutters">
  <div class="grid-block small-6 medium-4 bg-fill-color">Hello</div>
  <div class="grid-block small-6 medium-8 bg-fill-color">World</div>
</div>

Manual Sizing grid with wrap Note: should use temp .scss shiv for wrap above

<div class="grid-block gutters wrap">
  <div class="grid-block small-12 medium-4 bg-fill-color">Hello</div>
  <div class="grid-block small-6 medium-8 bg-fill-color">Around</div>
  <div class="grid-block small-6 medium-6 bg-fill-color">the</div>
  <div class="grid-block small-12 medium-6 bg-fill-color">World</div>
</div>

Docs (does not show cleary with current documentation style treatment)

<h4>Gutters</h4>

<p>Use `gutters` class on your `grid-block` to apply `$global-spacing` to your columns. This can help with styling background fills of your blocks that will strech the full height.</p>

<hljs language="html">
<div class="grid-block gutters">
  <div class="shrink grid-block"></div>
  <div class="grid-block"></div>
</div>
</hljs>

<div class="docs-grid-demo grid-block gutters">
  <div class="shrink grid-block"></div>
  <div class="grid-block"></div>
</div>

<p>Gutters with manual sizing.</p>

<hljs language="html">
<div class="grid-block gutters">
  <div class="small-6 grid-block"></div>
  <div class="small-2 grid-block"></div>
</div>
</hljs>

<div class="docs-grid-demo grid-block gutters">
  <div class="small-6 grid-block"></div>
  <div class="small-2 grid-block"></div>
</div>

<hr>

[TravisMullen]

Fun Fact: This uses CSS calc() to achieve the desired results. caniuse.com/calc

[soumak77]

Feel free to submit this PR against the new fork