Grid columns with centered children.

_grid-columns.scss

@import "breakpoint";

// Breakpoints
$sm: 375px;
$md: 600px;
$md-lg: 768px;
$lg: 900px;
$lg-xl: 1032px;
$xl: 1170px;
$xxl: 1500px;

// mini reset
ul {
  list-style-type: none;
  padding: 0;
}

.grid-columns {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;

  &.col-2 {
    @include breakpoint($sm) {
      grid-template-columns: repeat(4, 1fr);
      .grid-block {
        grid-column: span 2;
      }
    }
  }
  &.col-3 {
    @include breakpoint($sm) {
      grid-template-columns: repeat(4, 1fr);
      .grid-block {
        grid-column: span 2;
        &:last-child:nth-child(2n - 1) {
          grid-column: 2 / span 2;
        }
      }
    }
    @include breakpoint($md) {
      grid-template-columns: repeat(6, 1fr);
      .grid-block {
        grid-column: span 2;
        &:last-child:nth-child(2n - 1) {
          grid-column: span 2;
        }
      }
    }
  }
  &.col-4 {
    @include breakpoint($sm) {
      grid-template-columns: repeat(4, 1fr);
      .grid-block {
        grid-column: span 2;
        &:last-child:nth-child(2n - 1) {
          grid-column: 2 / span 2;
        }
      }
    }
    @include breakpoint($md) {
      grid-template-columns: repeat(6, 1fr);
      .grid-block {
        grid-column: span 2;
        &:last-child:nth-child(2n - 1) {
          grid-column: span 2;
        }
        /* Dealing with 2 orphan items */
        &:last-child:nth-child(3n - 1) {
          grid-column-end: -2;
        }
        &:nth-last-child(2):nth-child(3n + 1) {
          grid-column-end: 4;
        }
        /* Dealing with single orphan */
        &:last-child:nth-child(3n - 2) {
          grid-column-end: 5;
        }
      }
    }
    @include breakpoint($lg) {
      grid-template-columns: repeat(8, 1fr);
      .grid-block {
        /* Resetting conflicting values */
        &:last-child:nth-child(3n - 1) {
          grid-column-end: auto;
        }
        &:nth-last-child(2):nth-child(3n + 1) {
          grid-column-end: auto;
        }
        &:last-child:nth-child(3n - 2) {
          grid-column-end: auto;
        }
        /* Dealing with 3 orphan items */
        &:nth-last-child(3):nth-child(4n - 3) {
          grid-column-end: -6 !important;
        }
        &:nth-last-child(2):nth-child(4n - 2) {
          grid-column-end: -4 !important;
        }
        &:last-child:nth-child(4n - 1) {
          grid-column-end: -2 !important;
        }
        /* Dealing with 2 orphan items */
        &:last-child:nth-child(4n - 2) {
          grid-column-end: -3 !important;
        }
        &:nth-last-child(2):nth-child(4n - 3) {
          grid-column-end: -5 !important;
        }
        /* Dealing with single orphan */
        &:last-child:nth-child(4n + 1) {
          grid-column-end: -4 !important;
        }
      }
    }
  }
  &.col-5 {
    @include breakpoint($md) {
      grid-template-columns: repeat(4, 1fr);
      .grid-block {
        grid-column: span 2;
        &:last-child:nth-child(2n - 1) {
          grid-column: 2 / span 2;
        }
      }
    }
    @include breakpoint($lg) {
      grid-template-columns: repeat(6, 1fr);
      .grid-block {
        grid-column: span 2;
        &:last-child:nth-child(2n - 1) {
          grid-column: span 2;
        }
        /* Dealing with 2 orphan items */
        &:last-child:nth-child(3n - 1) {
          grid-column-end: -2;
        }
        &:nth-last-child(2):nth-child(3n + 1) {
          grid-column-end: 4;
        }
        /* Dealing with single orphan */
        &:last-child:nth-child(3n - 2) {
          grid-column-end: 5;
        }
      }
    }
    @include breakpoint($xl) {
      grid-template-columns: repeat(10, 1fr);
      .grid-block {
        grid-column: span 2;
        /* Dealing with 2 orphan items */
        &:last-child:nth-child(3n - 1) {
          grid-column: span 2;
        }
        &:nth-last-child(2):nth-child(3n + 1) {
          grid-column: span 2;
        }
        /* Dealing with single orphan */
        &:last-child:nth-child(3n - 2) {
          grid-column: span 2;
        }
      }
    }
  }

  .grid-block {
    background-color: #ccc;
    height: 40px;
  }
}

.col-5 still needs to be tested