Just another simple flexbox grid called 🍓 StrawberryGrid. This was created because you always need a simple, functional, adjustable grid - without unnecessary features.
StrawberryGrid is using the CSS Flexible Box Layout Module (Flexbox) to positioning elements in horizontal and/or vertical stacks - basically our Grid with columns. StrawberryGrid includes features for all properties prefixed with flex, as well as display: flex, display: inline-flex, align-content, align-items, align-self, justify-content and order.
Open StrawberryGrid.scss:
// Set the number of columns
$columns: 12 !default;
// Set the gutter between columns
$gutter-width: 1rem !default;
// Set a margin for the outer container
$outer-margin: 2rem !default;
// max width container size
$max-width: 1200px !default;
// possible breakpoints (name, min-width for media query, container width)
// "xs" is default, you don't need to add it.
$breakpoints: sm 48em 46rem, md 62em 61rem, lg 75em 71rem !default;sass --update --style=compressed StrawberryGrid.scss:../dist/StrawberryGrid.min.csssoon
Feel free to send pull requests and raise issues.