Add vertical spacing

[vmaha]

I'd like to add vertical spacing for tiled layouts, in which we need the vertical spacing between cells to be equal to the horizontal spacing. For example, the grid should allow us to create layouts that look like the image below, where the horizontal and vertical arrows are equal in length.

I plan on sending our a pull request with this addition, but I wanted to figure out the best way to solve it first.

Option 1

Users can add .vertical-spacing to their grid element or individual row. This will work much like the existing fixed-* helpers.

Option 2

We'll add a vertical-spacing boolean to config.scss, which users can turn on if they want vertical spacing.

From the users perspective, option 1 seems better in every way: option 2 forces them to apply the rule to the entire webpage, and forces them to rebuild the grid.

Let me know which option is better and I'll submit the PR.

[kylezinter]

Hey @vmaha, thanks for calling this out. I agree, Option 1 seems like the better approach to me. Let's go with that!

[kylezinter]

Let me know if you need any help creating this.

[vmaha]

Ok, I'm working on option 1.

I'm not done as yet, but you can take a look at my approach here if you'd like: vmaha@24f0b7f.

I've update the complex demo page to use the new vertical-spacing class, and it looks good so far, but I need to make it work for all of the fixed-* variations, and fix some kinks about intra-row padding; they seem to overlap, so the padding between rows is 1/2 of what it should be.

[englishextra]

Gentlemen. Sorry to interrupt yourgoodselves. The spacing strory is solved and what commit it is?

[vivmaha]

No, I did not get a chance to complete this.

I did a bit of refactoring to prep for this, and that made it into master:
https://github.com/winjs/grid/commits?author=vmaha

I also have a draft of my approach here:
vmaha/grid@24f0b7f

Hope this helps!