親が flex-flow: row wrap なときにいい感じで横並びするやつ

align-cell.scss

// 親が flex-flow: row wrap なときにいい感じで横並びするやつ

@mixin align-cell($row: 4, $gap-horz: 20px, $gap-vert: 20px) {
  width: calc(100% / #{$row} - #{$gap-horz * ($row - 1) / $row});

  & + & {
    margin-left: $gap-horz;
  }

  &:nth-of-type(n + #{$row + 1}) {
    margin-top: $gap-vert;
  }

  &:nth-of-type(#{$row}n + 1) {
    margin-left: 0;
  }

  @for $var from 1 to $row {
    // 改行が発生する場合最後の要素にmarginをつけて左寄せにする
    // 改行しない場合は何もしない
    &:nth-of-type(n + #{$row + 1}):nth-of-type(#{$row}n + #{$var}):last-of-type {
      margin-right: calc((100% / #{$row} - #{$gap-horz * ($row - 1) / $row}) * #{$row - $var} + #{$gap-horz} * #{$row - $var});
    }
  }
}