gridsystem.css

 *,
 *:after,
 *:before {
     box-sizing: border-box;
 }
 
 body {
     margin: 0;
     padding: 0;
 }
 
 .grid {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
 
 @media(max-width:425px) {
     .grid--mobile--100 {
         flex-direction: column;
     }
     .grid--mobile--50 {
         flex: 0 0 50%;
     }
 }
 
 [class*='col-'] {
     padding: 0 15px;
     min-height: 200px;
 }
 
 .col-ld-1 {
     flex: 0 0 12.5%;
 }
 
 .col-ld-2 {
     flex: 0 0 calc(12.5%*2);
 }
 
 .col-ld-3 {
     flex: 0 0 calc(12.5%*3);
 }
 
 .col-ld-4 {
     flex: 0 0 calc(12.5%*4);
 }
 
 .col-ld-5 {
     flex: 0 0 calc(12.5%*5);
 }
 
 .col-ld-6 {
     flex: 0 0 calc(12.5%*6);
 }
 
 .col-ld-7 {
     flex: 0 0 calc(12.5%*7);
 }
 
 .col-ld-8 {
     flex: 0 0 calc(12.5%*8);
 }
 
 .col-100 {
     flex: 0 0 100%;
 }
 
 .box {
     margin-top: 20px;
     width: 100%;
     height: 200px;
     background: black;
     margin-bottom: 15px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #fff;
 }