Why another grid mixin?
All the solutions out there fell into two categories:
- Did not support flexbox, instead favoring
- Required the use of
.col-1-xsor some other cluttered syntax
What I was after was a way to set my grid only using SCSS mixins. This is similar to how neat works.
This mixin assumes you are using and have loaded bourbon. This provides all the vendor-specific extensions you may need. If you don't want it, simply swap out the
@include display(flex); for
What I mean by a "standard grid" here is that in a 12 column configuration, you can have an incomplete row of columns only occupying > 12 columns. This will leave a space at the end of the row untouched.
Using the flex grid means setting
@include columns(12) will give a column a
flex property. It is preferred to use
@include column; in this
configuration and modifying the
flex-shrink values yourself.
See LICENSE in this repository for details.