Skip to content
This repository has been archived by the owner on Jul 14, 2023. It is now read-only.

Simplify grid-visual for consistent cross-browser behaviour #569

merged 1 commit into from
Apr 14, 2017


Copy link

@CosAnca CosAnca commented Mar 24, 2017

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.

Copy link

whmii commented Mar 28, 2017

@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.

@whmii whmii merged commit 2d645ef into thoughtbot:master Apr 14, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

2 participants