_base_grid-definitions.scss

@mixin vf-b-row-reset {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

@mixin vf-b-grid-definitions {
  %fixed-width-container {
    @extend %vf-grid-container-padding;
    margin-left: auto;
    margin-right: auto;
    max-width: $grid-max-width;
    width: 100%;
  }

  %vf-row {
    @extend %fixed-width-container;

    // default to flexbox for IE on large screens
    // on small screens we let columns render one under another
    @media (min-width: $breakpoint-large) {
      display: flex;
    }

    & & {
      @include vf-b-row-reset;
    }

    @supports (display: grid) {
      display: grid;
      grid-template-rows: auto;
      margin-left: auto;
      margin-right: auto;
      max-width: $grid-max-width;

      [class*='#{$grid-column-prefix}'] {
        grid-column-start: auto;
      }

      // set static gutter width per breakpoint
      @media (max-width: $threshold-4-6-col) {
        grid-gap: 0 map-get($grid-gutter-widths, small);
        grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr));

        & > * {
          grid-column-end: span $grid-columns-small;
        }
      }

      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
        grid-gap: 0 map-get($grid-gutter-widths, medium);
        grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));

        & > * {
          grid-column-end: span $grid-columns-medium;
        }
      }

      @media (min-width: $threshold-6-12-col) {
        grid-gap: 0 map-get($grid-gutter-widths, large);
        grid-template-columns: repeat($grid-columns, minmax(0, 1fr));

        & > * {
          grid-column-end: span $grid-columns;
        }
      }
    }
  }

  %vf-grid-container-padding {
    // set static outside padding per breakpoint
    @media (max-width: $threshold-4-6-col) {
      padding-left: map-get($grid-margin-widths, small);
      padding-right: map-get($grid-margin-widths, small);
    }

    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
      padding-left: map-get($grid-margin-widths, medium);
      padding-right: map-get($grid-margin-widths, medium);
    }

    @media (min-width: $threshold-6-12-col) {
      padding-left: map-get($grid-margin-widths, large);
      padding-right: map-get($grid-margin-widths, large);
    }
  }
}

// flexbox approximation of grid column styles for IE
// this needs to be a @mixin rather than %placeholder because it's ised inside @media queries
@mixin vf-grid-flex-column {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;

  // set static gutter width
  margin-left: map-get($grid-gutter-widths, large);

  &:first-child {
    margin-left: 0;
  }
}