_layout.scss

// Foundation for Sites
// https://get.foundation
// Licensed under MIT Open Source

////
/// @group grid
////

@use "sass:meta";

/// Sizes child elements so that `$n` number of items appear on each row.
///
/// @param {Number} $n - Number of elements to display per row.
/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
/// @param {Number|List} $gutter
///   The gutter to apply to child elements. Accepts multiple values:
///   - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
///   - A fixed numeric value will apply this gutter to all breakpoints.
@mixin grid-layout(
  $n,
  $selector: '.column',
  $gutter: null
) {
  & > #{$selector} {
    float: $global-left;
    width: percentage(divide(1, $n));

    // If a $gutter value is passed
    @if($gutter) {
      // Gutters
      @if meta.type-of($gutter) == 'map' {
        @each $breakpoint, $value in $gutter {
          $padding: rem-calc($value) * 0.5;

          @include breakpoint($breakpoint) {
            padding-right: $padding;
            padding-left: $padding;
          }
        }
      }
      @else if meta.type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
        $padding: rem-calc($gutter) * 0.5;
        padding-right: $padding;
        padding-left: $padding;
      }
    }

    &:nth-of-type(1n) {
      clear: none;
    }

    &:nth-of-type(#{$n}n+1) {
      clear: both;
    }

    &:last-child {
      float: $global-left;
    }
  }
}

/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
///
/// @param {Number} $n - Number of items that appear in each row.
@mixin grid-layout-center-last($n) {
  @for $i from 1 to $n {
    @if $i == 1 {
      &:nth-child(#{$n}n+1):last-child {
        margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
      }
    }
    @else {
      &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
        margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
      }
    }
  }
}