scss-framework/mixin/_layout.scss

@use 'sass:list';
@use 'sass:math';

@mixin layout($direction, $bpColumns: [], $gap: (0 0)) {
  display: flex;
  justify-content: space-between;
  flex-direction: $direction;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: wrap;
  column-gap: list.nth($gap, 1);
  row-gap: list.nth($gap, 2);

  @if list.length($bpColumns) > 0 {
    @for $bpIndex from 1 through list.length($bpColumns) {
      $bp: list.nth($bpColumns, $bpIndex);
      @include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) {
        $columns: list.nth($bp, 3);
        @for $i from 1 through list.length($columns) {
          $minmax: list.nth($columns, $i);
          $min: list.nth($minmax, 1);
          $max: list.nth($minmax, 2);
          & > *:nth-child(#{$i}) {
            @if math.unit($min) == "" and math.unit($max) == "" {
              flex: $max $min min-content;
            } @else if math.unit($min) == "" {
              flex: 1 $min auto;
            } @else if math.unit($max) == "" {
              flex: $max 0 auto;
            } @else {
              flex: 1 0 auto;
            }

            @if math.unit($min) != "" {
              @if $direction == 'row' {
                min-width: $min;
              } @else {
                min-height: $min;
              }
            }

            @if math.unit($max) != "" {
              @if $direction == 'row' {
                max-width: $max;
              } @else {
                max-height: $max;
              }
            }
          }
        }
      }
    }
  } @else {
    & > * {
      flex: 1 0 auto;
    }
  }
}