_grid.scss

@use "sass:math";

/// Grid
///
/// @param {Map} $args - Grid settings
@mixin grid($args: ()) {
  $settings: map-merge((
    'breakpoints': (
      421px: 2,
      641px: 3,
      981px: 4
    ),
    'item': null,
    'margin': 20px,
  ), $args);

  @if not map-get($settings, 'item') {
    @error '`item` should be set in grid() arguments.';
  }

  box-sizing: border-box;
  float: left;

  #{map-get($settings, 'item')} {
    box-sizing: border-box;
    clear: both;
    margin-bottom: map-get($settings, 'margin');
    width: 100%;

    @each $breakpoint, $columns in map-get($settings, 'breakpoints') {
      @media(min-width: $breakpoint) {
        $total-spacing: (map-get($settings, 'margin') * ($columns - 1));

        clear: none;
        float: left;
        margin-right: map-get($settings, 'margin');
        width: calc(math.div(100%, $columns) - math.div($total-spacing, $columns));

        $current-breakpoint-index: index(map-keys(map-get($settings, 'breakpoints')), $breakpoint);

        @if $current-breakpoint-index > 1 {
          $previous-columns: nth(map-values(map-get($settings, 'breakpoints')), $current-breakpoint-index - 1);

          &:nth-child(#{($previous-columns)}n) {
            margin-right: map-get($settings, 'margin');
          }

          &:nth-child(#{($previous-columns)}n+1) {
            clear: none;
          }
        }

        &:nth-child(#{$columns}n) {
          margin-right: 0;
        }

        &:nth-child(#{$columns}n+1) {
          clear: left;
        }
      }
    }
  }
}