//
// Grids
//

.container {
  width: 100%;
  padding-right: ($grid-spacing / 2);
  padding-left: ($grid-spacing / 2);
  margin-right: auto;
  margin-left: auto;

  @include make-container-max-widths();
}

.flow {
  display: flex;
  flex-wrap: wrap;
}

.#{$grid-columns-prefix} {
  flex: 0 0 percentage(1 / $grid-cols);

  @each $breakpoint in map-keys($breakpoints) {
    $prefix: breakpoint-prefix($breakpoint);

    @include breakpoint-up($breakpoint) {
      @for $i from 1 through $grid-cols {
        &#{$prefix}-#{$i} {
          flex: 0 0 percentage($i / $grid-cols);
          max-width: percentage($i / $grid-cols);
        }
      }
    }
  }

  &-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}

//
// Grid layout
//

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);

  .one {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .two {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
  }

  .three {
    grid-column: 1;
    grid-row: 2 / 5;
  }

  .four {
    grid-column: 3;
    grid-row: 3;
  }

  .five {
    grid-column: 2;
    grid-row: 4;
  }

  .six {
    grid-column: 3;
    grid-row: 4;
  }
}