SCSS пользовательского отзывчивый запас сетки на выпуске последних дочерней

Question

Я создал базовую систему сетки, чтобы заменить загрузчик на моих заказных проектах (пытаясь сократить зависимости)

Вы можете увидеть код здесь или ниже: http://codepen.io/anon/pen/ORVZyQ?editors=1100#0

Проблема, с которой я столкнулась, - это самый дальний правый элемент с запасом.

HTML в моем коде позволяет использовать 2x2 на маленьком экране и 4x1 на большом экране, однако на меньшем экране второй блок зацикливается слева, поскольку он имеет запас.

Как удалить поле, если оно является последним столбцом.

Спасибо!

HTML:

<div class="padding"> 
    <div class="row"> 
    <div class="col-xs-6 col-md-3" style="background:#ff9900; height:20px;"></div> 
    <div class="col-xs-6 col-md-3" style="background:#a82626; height:20px;"></div> 
    <div class="col-xs-6 col-md-3" style="background:#ff9900; height:20px;"></div> 
    <div class="col-xs-6 col-md-3" style="background:#a82626; height:20px;"></div> 
    </div> 
</div> 

SCSS:

// Margin 
$grid-spacing:3%; 
$row-gap: 10px; 

//Breakpoints 
$xsmall: 480px; 
$small:767px; 
$medium:1024px; 
$large:1600px; 
$xlarge:1920px; 

%clearfix:after { 
    display:block; 
    clear:both; 
    content:''; 
} 
.fullwidth { 
    margin-right: auto; 
    margin-left: auto; 
    @extend %clearfix; 
} 
.padded { 
    margin-right: auto; 
    margin-left: auto; 
    @extend %clearfix; 
    @media screen and (max-width:$xsmall) { 
     width: 100% 
    } 
    @media screen and (min-width:$xsmall + 1) and (max-width:$small) { 
     width: $xsmall 
    } 
    @media screen and (min-width:$small + 1) and (max-width:$medium) { 
     width: $small 
    } 
    @media screen and (min-width:$medium + 1) and (max-width:$large) { 
     width: $medium 
    } 
    @media screen and (min-width:$large + 1) and (max-width:$xlarge) { 
     width: $large 
    } 
    @media screen and (min-width:$xlarge + 1) { 
     width: $xlarge 
    } 
} 
.row { 
    @extend %clearfix; 

    & + & { 
     margin-top: $row-gap; 
    } 
} 
[class^="col-"] { 
    float:left; 
    margin-right:$grid-spacing; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    width: 100%; 
    &:last-child { 
     margin-right:0%; 
    } 
} 

.col-xs-1 { width: (100% - ($grid-spacing *11)) /12; } 

.col-xs-2 { width: (100%/(12/2)) - ($grid-spacing *10 /12); } 

.col-xs-3 { width: (100%/(12/3)) - ($grid-spacing *9 /12); } 

.col-xs-4 { width: (100%/(12/4)) - ($grid-spacing *8 /12); } 

.col-xs-5 { width: (100%/(12/5)) - ($grid-spacing *7 /12); } 

.col-xs-6 { width: (100%/(12/6)) - ($grid-spacing *6 /12); } 

.col-xs-7 { width: (100%/(12/7)) - ($grid-spacing *5 /12); } 

.col-xs-8 { width: (100%/(12/8)) - ($grid-spacing *4 /12); } 

.col-xs-9 { width: (100%/(12/9)) - ($grid-spacing *3 /12); } 

.col-xs-10 { width: (100%/(12/10)) - ($grid-spacing *2 /12); } 

.col-xs-11 { width: (100%/(12/11)) - ($grid-spacing *1 /12); } 

.col-xs-12 { width: 100%; } 

@media screen and (min-width:$xsmall + 1) { 
    .col-sm-1 { width: (100% - ($grid-spacing *11)) /12; } 

    .col-sm-2 { width: (100%/(12/2)) - ($grid-spacing *10 /12); } 

    .col-sm-3 { width: (100%/(12/3)) - ($grid-spacing *9 /12); } 

    .col-sm-4 { width: (100%/(12/4)) - ($grid-spacing *8 /12); } 

    .col-sm-5 { width: (100%/(12/5)) - ($grid-spacing *7 /12); } 

    .col-sm-6 { width: (100%/(12/6)) - ($grid-spacing *6 /12); } 

    .col-sm-7 { width: (100%/(12/7)) - ($grid-spacing *5 /12); } 

    .col-sm-8 { width: (100%/(12/8)) - ($grid-spacing *4 /12); } 

    .col-sm-9 { width: (100%/(12/9)) - ($grid-spacing *3 /12); } 

    .col-sm-10 { width: (100%/(12/10)) - ($grid-spacing *2 /12); } 

    .col-sm-11 { width: (100%/(12/11)) - ($grid-spacing *1 /12); } 

    .col-sm-12 { width: 100%; } 
} 
@media screen and (min-width:$small + 1) { 
    .col-md-1 { width: (100% - ($grid-spacing *11)) /12; } 

    .col-md-2 { width: (100%/(12/2)) - ($grid-spacing *10 /12); } 

    .col-md-3 { width: (100%/(12/3)) - ($grid-spacing *9 /12); } 

    .col-md-4 { width: (100%/(12/4)) - ($grid-spacing *8 /12); } 

    .col-md-5 { width: (100%/(12/5)) - ($grid-spacing *7 /12); } 

    .col-md-6 { width: (100%/(12/6)) - ($grid-spacing *6 /12); } 

    .col-md-7 { width: (100%/(12/7)) - ($grid-spacing *5 /12); } 

    .col-md-8 { width: (100%/(12/8)) - ($grid-spacing *4 /12); } 

    .col-md-9 { width: (100%/(12/9)) - ($grid-spacing *3 /12); } 

    .col-md-10 { width: (100%/(12/10)) - ($grid-spacing *2 /12); } 

    .col-md-11 { width: (100%/(12/11)) - ($grid-spacing *1 /12); } 

    .col-md-12 { width: 100%; } 
} 
@media screen and (min-width:$medium + 1) { 
    .col-lg-1 { width: (100% - ($grid-spacing *11)) /12; } 

    .col-lg-2 { width: (100%/(12/2)) - ($grid-spacing *10 /12); } 

    .col-lg-3 { width: (100%/(12/3)) - ($grid-spacing *9 /12); } 

    .col-lg-4 { width: (100%/(12/4)) - ($grid-spacing *8 /12); } 

    .col-lg-5 { width: (100%/(12/5)) - ($grid-spacing *7 /12); } 

    .col-lg-6 { width: (100%/(12/6)) - ($grid-spacing *6 /12); } 

    .col-lg-7 { width: (100%/(12/7)) - ($grid-spacing *5 /12); } 

    .col-lg-8 { width: (100%/(12/8)) - ($grid-spacing *4 /12); } 

    .col-lg-9 { width: (100%/(12/9)) - ($grid-spacing *3 /12); } 

    .col-lg-10 { width: (100%/(12/10)) - ($grid-spacing *2 /12); } 

    .col-lg-11 { width: (100%/(12/11)) - ($grid-spacing *1 /12); } 

    .col-lg-12 { width: 100%; } 
} 
@media screen and (min-width:$large + 1) { 
    .col-xl-1 { width: (100% - ($grid-spacing *11)) /12; } 

    .col-xl-2 { width: (100%/(12/2)) - ($grid-spacing *10 /12); } 

    .col-xl-3 { width: (100%/(12/3)) - ($grid-spacing *9 /12); } 

    .col-xl-4 { width: (100%/(12/4)) - ($grid-spacing *8 /12); } 

    .col-xl-5 { width: (100%/(12/5)) - ($grid-spacing *7 /12); } 

    .col-xl-6 { width: (100%/(12/6)) - ($grid-spacing *6 /12); } 

    .col-xl-7 { width: (100%/(12/7)) - ($grid-spacing *5 /12); } 

    .col-xl-8 { width: (100%/(12/8)) - ($grid-spacing *4 /12); } 

    .col-xl-9 { width: (100%/(12/9)) - ($grid-spacing *3 /12); } 

    .col-xl-10 { width: (100%/(12/10)) - ($grid-spacing *2 /12); } 

    .col-xl-11 { width: (100%/(12/11)) - ($grid-spacing *1 /12); } 

    .col-xl-12 { width: 100%; } 
} 

EDIT 1: Я попытался заменить маржу с прокладкой, но это означает, что он не идет к краю контейнера : http://codepen.io/anon/pen/kkrroN?editors=1100#0

Answer 1

Если я вас хорошо понимаю, поэтому вам нужно использовать псевдоселектор: nth-last-of-type вместо последнего ребенка

[class^="col-"] { 
    float:left; 
    margin-right:$grid-spacing; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    width: 100%; 
    &:nth-last-of-type(1) { 
     margin-right: 0; 
    } 
} 

Answer 2

Если вы уверены, что для меньших экранов собирается быть 2х2 можно легко сделать с помощью (даже) правила и &:last-child

Check on CodePen (colors only for testing purposes)

[class^="col-"] { 
    float:left; 
    margin-right:$grid-spacing; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    width: 100%; 
    background: black; 

    &:nth-child(even) { 
     background-color: red; 
     margin-right: 0; 
    } 

    @media screen and (min-width:$small + 1) { 
     &:nth-child(even) { 
     margin-right: $grid-spacing; 
     } 

     &:last-child { 
     background-color: blue; 
     margin-right: 0; 
     } 
    } 
} 

Так что теперь

1 - 2 
3 - 4 
5 - 6 and so on... 

каждый четный блок будет иметь margin-right: 0, но на больших экранах только последний;)

СОВЕТ: Не используйте единицы измерения для нулевых значений, это плохая практика

Answer 3

я понял это, я выгружен на поле для заполнения, как на «EDIT1», но причина для пространства я сделал не обновлять уравнения ширины сетки.

Вам необходимо удалить участок сетки. например .:

.col-md-3 { width: (100%/(12/3)) - ($grid-spacing *9 /12); } 

Изменения

.col-md-3 { width: (100%/(12/3)); }