Live Demo for Grid System

Mixins for Grid System

    
    // Before using grid system mixin, "Mixins for Breakpoints" should use to work this as excepted

    $grid-gutter: 0.5rem;

    @mixin grid-columns($columns: 12) {
        @each $breakpoint, $size in $breakpoints {
            @for $i from 1 through $columns {
                $width: calc(#{$i} / #{$columns} * 100%);
                $breakpoint-prefix: "";
                @if $breakpoint != "xs" {
                    $breakpoint-prefix: "#{$breakpoint}-";
                }
                .#{$breakpoint-prefix}col-#{$i} {
                @if $breakpoint != "xs" {
                @media (min-width: #{$size}) {
                    flex: 0 0 $width;
                    width: $width;
                    max-width: $width;
                    padding-inline: $grid-gutter;
                }
                } @else {
                    flex: 0 0 $width;
                    width: $width;
                    max-width: $width;
                    padding-inline: $grid-gutter;
                }
                }
            }
        }
    }

    // Include in project to use grid system
    @include grid-columns;
    
    
    

Live Demo for container size update on each breakpoint