Custom gird for wordpress development

lorem-grid.scss

.grid-container {
  width :100%;
  max-width: 1240px;
}

.grid-container {
  box-sizing: border-box;
  /*-- our cleafix hack -- */
  .row:before,
  .row:after {
    content:"";
    display: table;
    clear:both;
  }

  // TODO: removed link border from grid links
  [class*='col-'] {
    a, a:hover{
      border: none;
    }
  }

  [class*='col-'] {
    //float: left;
    //min-height: 1px;
    //width: 16.66%;
    width: 100%;
    /*-- our gutter --*/
    padding: $global-padding/2;
  }
  //.row{
  //  @extend .outlined;
  //  display: flex;
  //  justify-content: space-between;
  //  flex-wrap: wrap;
  //}

}

// TODO: Document how to use sass maps
.grid-head{
  background-color: map-get($theme-colors, primary);
  font-family: $font-family-sans-serif;
  color: $white;
  font-weight: $global-weight-bold;
}

.grid-container {
  @include medium-screen{
    [class*='col-'] {
      float: left;
      min-height: 1px;
    }
    .col-1{
      width: 8.333333%;
    }
    .col-2{
      width: 16.666666%;
    }
    .col-3{
      width: 24.999999%;
    }
    .col-4{
      width: 33.333332%;
    }
    .col-5{
      width: 41.666665%;
    }
    .col-6{
      width: 49.999998%;
    }
    .col-7{
      width: 58.333331%;
    }
    .col-8{
      width: 66.666664%;
    }
    .col-9{
      width: 74.999997%;
    }
    .col-10{
      width: 83.333333%;
    }
    .col-11{
      width: 91.666663%;
    }
    .col-12{
      width: 99.999996%;
    }
  }
}

//.grid-container .row{
//  @include medium-screen{
//    display: flex;
//    align-items: center;
//    justify-content: center;
//  }
//}