Add a grid system for views

[markconroy]

it would be handy to be able to drop css classes into our views for such as view--grid-thirds and let that automatically layout items in one column on mobile, 2 columns on tablet, and 3 columns on large screens.

Classes to include:

• view--grid-halves
• view--grid-thirds
• view--grid-quarters

• view--grid-fifths

  As well as that, can can specify the gap with with the following classes:

• view--grid-gap-none
• view--grid-gap-small
• view--grid-gap-smaller
• view--grid-gap-smallest
• view--grid-gap-medium
• view--grid-gap-large
• view--grid-gap-larger
• view--grid-gap-largest

We might be able to extend our current lgd-row type system for this purpose.

While this will not suffice every layout for every view, I reckon it will suffice for 90% of them. Then we can easily drop the classes into the views CSS field.

[andybroomfield]

BHCC has a few extensions to the lgd grid system, using classes m:lgd-row__one-quarter l:lgd-row__one-quarter etc.

[markconroy]

Thanks @andybroomfield, I think the approach I have is a little less sophisticated, but will cover most of our use cases, and should be easy to add to like in your examples above. I'll post a PR in a few minutes.

My hope later would be to deprecated the .lgd-row grid system we have (which uses flex) and move towards a newer system (which uses grid).