// Make any element a grid row. @include grid-row();
@mixin grid-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc($grid-gutter-width / -2);
  margin-left:  calc( $grid-gutter-width / -2);
}


// Make any parent a grid container. @include grid-container();
@mixin grid-container() {
  margin-right: auto;
  margin-left: auto;
  padding-right: calc($grid-gutter-width / 2);
  padding-left: calc($grid-gutter-width / 2);
  width: 100%;
}

// Formats breakpoints to ascending order for generating with grid-container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");

// For container-fixed - set container max-width at all breakpoints. @include grid-container-max-widths();
@mixin grid-container-max-widths($max-widths: $container-max-widths, $grid-breakpoints: $breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      max-width: $container-max-width;
    }
  }
}

// Generate parent grid columns. @include grid-col-parent;
@mixin grid-col-parent() {
  position: relative;
  width: 100%;
  min-height: 1px; // Prevent collapsing
  padding-right: calc($grid-gutter-width / 2);
  padding-left: calc($grid-gutter-width / 2);
}

// Generate named grid columns - sets flex and max-width for each column. @include grid-col(4, $grid-columns);
@mixin grid-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage(calc($size / $columns));
  max-width: percentage(calc($size / $columns));
}