grid

grid.css

@charset "UTF-8";

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}




  /* max-width: 59.375rem; */

.container{
  margin: 0 auto;
  /* width: 90%; */
  width:1142px;
}

@media ( min-width: 768px ) {
  .column {
    margin:0;
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .column.full { width: 100%; }
  .column.two-thirds { width: 66.6666666666%; }
  .column.half { width: 50%; }
  .column.third { width: 33.333333333%; }
  .column.fourth { width: 25%;}
  .column.flow-opposite { float: right; }
  html { font-size: 1.20em;}
} /* end min-width: 768px */

@media screen and ( min-width:980px) and (max-width: 1240px){
  .container { width:935px;}
  html { font-size: 1.15em;}
}

@media screen and (min-width:768px ) and (max-width: 980px){
  .container { width:724px;}
  html { font-size: 1.10em;}
}

@media only screen and (min-width: 600px) and (max-width: 768px) {
  .half > .half { width: 50%;}
  .half > .column { float:left; }
  .container { width:100%; }

html { font-size: 1em; }
}

@media only screen and (min-width:480px )  and (max-width: 600px) {
  .half > .half {width: 50%; }
  .half > .column { float:left; }
  .container { width:100%; }
  html { font-size: 0.95em; }
}

@media only screen and ( min-width:100px ) and ( max-width: 480px) {
  .container{ width: auto;}
   html { font-size: 0.92em; }
}



*:hover { outline: 2px dotted red; }
* *:hover { outline: 2px dotted green; }
* * *:hover { outline: 2px dotted orange; }
* * * *:hover { outline: 2px dotted blue; }
* * * * *:hover { outline: 1px solid red; }
* * * * * *:hover { outline: 1px solid green; }
* * * * * * *:hover { outline: 1px solid orange; }
* * * * * * * *:hover { outline: 1px solid blue; }

index.html

<div class="container">
    <div class="row clearfix">
       <div class="column half">
            4
        </div>
      <div class="column half">
        3
      </div>
    </div>
  <div class="row clearfix">
    <div SomeRandomStringclass="column half">
        2
    </div>
    <div class="column half">
        1
    </div>
  </div>

</div>