Возможно ли определить элементы из последней строки в flexbox или посчитать в css кол-во элементов?

Question

[mixejuxix]

Пилю миксин для создания сеток из заданного количества колонок и отступа между ними.
Пример можно глянуть на - https://jsfiddle.net/yof4trp0/.

Но вот проблема - у элементов в последней строчке нужно убрать margin-bottom, иначе получается некрасиво.

Можно ли как-то посчитать количество текущих элементов внутри контейнера? Чтобы сделать как-то так:

&:nth-last-of-type(-n + abs($elemCount / $count)) {
    margin-bottom: 0;
}

Может есть еще какой-то способ снять margin-bottom с последней строчки?

Comments

[Шохрух Шаймардонов]

Посчитайте Тут. Должно помочь разобраться

[WapSter]

у контейнера делать отрицательный марджин. Количество элементов можно подсчитать только при помощи js.

Answer 1

[0xD34F]

Вместо margin-bottom задавайте margin-top, и первым count элементам выставляйте 0:

margin-top: $margin;

@for $i from 1 through $count {
  &:nth-child(#{$i}) {
    margin-top: 0;
  }
}

Comments

[mixejuxix]

Спасибо, по итогу вот такой миксин вышел:

@mixin grid($count, $margin) {
  box-sizing: border-box;
  width: calc( (100% / #{$count}) - (#{$margin}  * (#{$count} - 1) / #{$count}) );

  margin-top: $margin;

  &:nth-of-type(-n + 9999) {
    margin-top: $margin;
  }

  &:nth-of-type(-n + #{$count}) {
    margin-top: 0;
  }

  &:nth-of-type(#{$count}n) {
    margin-right: 0;
  }

  &:not(:nth-child(#{$count}n)) {
    margin-right: $margin;
  }
}

Может кто то сможет что-нибудь улучшить?

[Сергей delphinpro]

mixejuxix,