Своя сетка на 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");
}
/*****/

или так

$xs: 500px;
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xxlg: 1382px;


$breack_points: (
    xs: $xs,
    sm: $sm,
    md: $md,
    lg: $lg,
    xxlg: $xxlg
);
$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;
    }
    
    [class*="#{$prefix}-col-"] > .#{$prefix}-container{
            margin-left: -$padding;
            margin-right: -$padding;
            padding-right: 0;
            padding-left: 0;
        
    }
    
    .#{$prefix}-container-fluid{
        width: 100%;
    }
        
    @each $size, $witdh in $args{

        @media (max-width: #{$witdh}){
            .#{$prefix}-d-none-#{$size}{
                display: none !important;
            }
        }
        
        @media (min-width: #{$witdh}){
            
            .#{$prefix}-d-none-from-#{$size}{
                display: none !important;
            }
            
            .#{$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};
            }
            
            .nopadding-#{$size}{
                padding: 0;
            }
            
            @include greed-size($size,$cols,$prefix);
        }
    }
}

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

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

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


.nopadding{
    padding: 0;
}

.with-min-content{
    width: min-content;
}
.with-max-content{
    width: max-content;
}

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

Css Анимации

Контент во всю ширину , игнорируя размеры предка

Сравнительная таблица em vs px

Добавить комментарий Отменить ответ