Cacher is the code snippet organizer for pro developers

///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//////////////////// FLEX GRID ////////////////////////
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////

.flex-grid {
    display: flex; flex-wrap: wrap;
    margin: 0 -10px;

    .grid-item {
        max-width: 100%; width: 100%; padding: 0 10px;
    }

    &.x-start   { justify-content: flex-start; }
    &.x-end     { justify-content: flex-end; }
    &.x-center  { justify-content: center; }
    &.x-between { justify-content: space-between; }
    &.x-around  { justify-content: space-around; }

    &.y-start   { align-items: flex-start; }
    &.y-end     { align-items: flex-end; }
    &.y-center  { align-items: center; }

    &.cols-2 {

        .grid-item { .width(50,50,50,100); }
    }
    &.cols-3 {

        .grid-item { .width(33.33,33.33,50,100);}
    }
    &.cols-4 {

        .grid-item { .width(25,25,33.33,100); }
    }
    &.cols-5 {

        .grid-item { .width(20,25,33.33,100); }
    }
    &.cols-6 {

        .grid-item { .width(16.66,33.33,33.33,100); }
    }
}