scss Sass Flex Grid

Posted 2021-05-17

// Breakpoints map
$breakpoints: (
    xs: $phone,
    sm: $phone--land,
    md: $tablet,
    lg: $desktop,
    xl: $desktop--land,
);

// media query mixin
@mixin break($size) {
    @media (min-width: map-get($breakpoints, $size)) {
        @content;
    }
}

// number of columns variable
$items: 12;

// grid container
.grid {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1rem;
}

// grid item
.grid__item {
    padding: 0.5rem;

    &:nth-child(even) {
        background-color: #eee;
    }

    &:nth-child(odd) {
        background-color: #ddd;
    }
}

// loop over the breakpoints
@each $key,
$value in $breakpoints {
    @for $i from 1 through $items {
        .col-#{$key}--#{$i} {
            flex: 0 0 100%;

            @include break($key) {
                flex: 0 0 #{$i / $items * 100%};
            }
        }
    }
}