float-grid.css

* {
  box-sizing: border-box;
}

/* Grid measurements:
 *
 *   960px wide including 12 gutters (half gutters on both edges)
 *
 *   60px columns (12)
 *   20px gutters (two half-gutters + 11 full gutters, so 12 total)
 *
 *
 *   For smaller screens, we always want 20px of padding on either side,
 *   so 960 + 20 + 20 => 1000px
 *
 **/
.row {
  max-width: 1000px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

/* Clearfix */
.row::before,
.row::after {
  display: table;
  content: '';
}

.row::after {
  clear: both;
}

.col-3, .col-4, .col-6, .col-12 {
  float: left;

  /* Gutters:
   * Each column is padded by half-a-gutter on each side,
   *
   * Half a gutter is 10px, 10/960 (context) = 1.041666%
   *
   */
  padding-left: 1.04166666%;
  padding-right: 1.04166666%;
}

/* Mobile defaults */
.col-3, .col-4, .col-6, .col-12 {
  width: 100%;
}

/* Non-mobile, grid */
@media only screen and (min-width: 640px) {
  /* 3 columns, 3/12 in % */
  .col-3 {
    width: 25%;
  }
    .col-3:nth-of-type(2n+1) {
    clear: none;
  }
   
  .col-3:nth-of-type(2n+1) {
    clear: left;
  }


  /* 4 columns */
  .col-4 {
    width: 33.33%;
  }
    .col-4:nth-of-type(2n+1) {
    clear: none;
  }
   
  .col-4:nth-of-type(3n+1) {
    clear: left;
  }




  /* 6 columns */
  .col-6 {
    width: 50%;
  }
 /*
      .col-6:nth-of-type(5n+1) {
    clear: none;
  }
   
  .col-6:nth-of-type(5n+1) {
    clear: left;
  }
 */


  /* 12 columns */
  .col-12 {
    width: 100%;
  }
}

/* Create two unequal columns that floats next to each other */
.column {
    padding: 10px;
    position: relative;
    margin: 0 auto;
}

.left {
  width: 75%;  
 
}

.right {
  width: 25%;  
 
}


.column::before,
.column::after {
  position: absolute;
}



/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}