Simplify grid-visual for consistent cross-browser behaviour

[CosAnca]

The gradient style of grid-visual behaves inconsistent across browsers and currently has major rendering issues on Chrome. In the same time having the gutters painted creates a bit of confusion, where I think users expect the paint to be applied to the columns. (mainly when coming from a design tool like Sketch or Illustrator where the grid layout highlights the columns and not the gutters).

This mainly solves #539 but in the same time updates the grid-visual to a column-based painting rather than a gutter-based painting.

We basically go from this:

to this:

This update simplifies the grid-visual mixin by introducing the repeating-linear-gradient(...) property which allows us to consider the width of only a single column, instead of looping through each grid-column to create the linear-gradient(...). Also the calc() function has better cross browser integration and consistency when used within the repeating-linear-gradient property.

[whmii]

@CosminAnca so… I feel silly. I didn't even know repeating-linear-gradient was a thing! This is very cool. I will test it out tonight.