Своя сетка на flex

.flex-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

[class*="size-col-"]{
    width: 100%;
}

@mixin greed-size($property) {
    $padding: 20px;
    @for $i from 1 through 12 {
        $size: (100% / 12 * $i);
        .size-col-#{$property}-#{$i} { 
            @if($i == 12){
                width: #{$size};
            }@else{
                width: calc(#{$size} – #{$padding});
            }
        }
    }
}

@media (min-width:500px){
     @include greed-size("xs");
}

@media (min-width:768px){
     @include greed-size("sm");
}

@media (min-width:992px) {
     @include greed-size("md");
}

@media (min-width:1200px){
     @include greed-size("lg");
}
/*****/

или так

$breack_points: (
    xs: 500,
    sm: 768,
    md: 992,
    lg: 1200,
    xxlg: 1382
);
$padding: 15px;

@mixin greed-size($property,$cols,$prefix) {
    @for $i from 1 through $cols {
        $size: (100% / $cols * $i);
        .#{$prefix}-col-#{$property}-#{$i} { 
            width: #{$size};
        }
    }
}

@mixin set_greed($prefix,$cols,$args){
    [class*="#{$prefix}-col-"]{
        width: 100%;
        padding: 0 $padding;
        box-sizing: border-box;
    }

    .#{$prefix}-container-fluid,
    .#{$prefix}-container{
        max-width: 100%;
        padding: 0 $padding;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        box-sizing: border-box;
    }
    
    .#{$prefix}-container{
        .#{$prefix}-container{
            margin-left: 0;
            margin-right: 0;
        }
    }
    
    .#{$prefix}-container-fluid{
        width: 100%;
    }
        
    @each $size, $witdh in $args{

        @media (min-width: #{$witdh}px){
            
            .#{$prefix}-d-none-#{$size}{
                display: none;
            }
            
            .#{$prefix}-justify-center-#{$size}{
                justify-content: center;
            }
            .#{$prefix}-justify-right-#{$size}{
                justify-content: flex-end;
            }
            
            .#{$prefix}-justify-left-#{$size}{
                justify-content: flex-start;
            }
            
            .#{$prefix}-container{
                max-width: #{$witdh}px;
            }
            
            .nopadding-#{$size}{
                padding: 0;
            }
            
            @include greed-size($size,$cols,$prefix);
        }
    }
}

@include set_greed("rc",24,$breack_points);

.justify-content-center{
    justify-content: center;
}

Будет дополнятся …

andxbes

Своя сетка на flex

Leave a Reply Cancel reply