megclaypool of Rootid
3/24/2020 - 4:44 PM

Padding to achieve a consistent gutter (x) between n-across cards

.card--GOOD_LORD_BE_MORE_SPECIFIC_THAN_JUST_CARD {
  $card_gutter: DESIRED_GUTTER_BETWEEN_CARDS_GOES_HERE;
  padding: 0;

  @include rem('margin-bottom', $card_gutter);

  // n across
  @include breakpoint(DESIRED_BREAKPOINT_GOES_HERE) {
    $n: DESIRED_NUMBER_ACROSS_GOES_HERE;

    flex-basis: (100% / $n);
    max-width: (100% / $n);

    @for $i from 1 through $n {
      &:nth-of-type(#{$n}n + #{$i}) {
        @include rem('padding-left', (($i - 1) * $card-gutter / $n));
        @include rem('padding-right', (($n - $i) * $card-gutter / $n));
      }
    }
  }
}