css grid

grid.css

/** 
 * Grid
 * 
 * useage: 
 
    // 25% vs 75%
    <div class="grid-row">
      <div class="grid-span-1/4"></div>
      <div class="grid-span-3/4"></div>
    </div>
    
    // Half/Half
    <div class="grid-row">
      <div class="grid-span-3/6"></div>
      <div class="grid-span-3/6"></div>
    </div>
    
    <div class="grid-row">
      <div class="grid-span-1/2"></div>
      <div class="grid-span-1/2"></div>
    </div>
    
    // 4 columns
    <div class="grid-row">
      <div class="grid-span-1/4"></div>
      <div class="grid-span-1/4"></div>
      <div class="grid-span-1/4"></div>
      <div class="grid-span-1/4"></div>
    </div>
    
 **/

/** 
 * Row
 **/
.grid-row { width: 100%; margin: 0 auto; }
.grid-row:before,
.grid-row:after { content: " " ; display: table; }
.grid-row:after { clear: both; }

/** 
 * Columns
 **/
[class*="grid-span"] {
  display: block;
  float: left;
  padding: 0 10px;
}

.grid-row .row > [class*="grid-span"]:first-child{ padding-left: 0; }

[class*="grid"] img { width: 100%; height: auto; }

[class*="-1/1"],
[class*="-2/2"],
[class*="-3/3"],
[class*="-4/4"],
[class*="-5/5"],
[class*="-6/6"],
[class*="-7/7"]
[class*="-8/8"] { width: 100%; }

[class*="-4/6"],
[class*="-3/4"],
[class*="-6/8"]{ width: 75%; }

[class*="-4/6"],
[class*="-2/3"]{ width: 66.666666667%; }

[class*="-1/2"],
[class*="-2/4"],
[class*="-3/6"],
[class*="-4/8"]{ width: 50%; }

[class*="-2/6"],
[class*="-1/3"]{ width: 33.333333333%; }

[class*="-2/6"],
[class*="-1/4"],
[class*="-2/8"]{ width: 25%; }

[class*="-7/8"]{ width: 87.5%; }
[class*="-5/8"]{ width: 62.5%; }
[class*="-3/8"]{ width: 37.5%; }
[class*="-1/8"]{ width: 12.5%; }

[class*="-6/7"]{ width: 85.714285714%; }
[class*="-5/7"]{ width: 71.428571428%; }
[class*="-4/7"]{ width: 57.142857142%; }
[class*="-3/7"]{ width: 42.857142857%; }
[class*="-2/7"]{ width: 28.571428571%; }
[class*="-1/7"]{ width: 14.285714285%; }

[class*="-5/6"]{ width: 83.333333334%; }
[class*="-1/6"]{ width: 16.666666667%; }

[class*="-4/5"]{ width: 80%; }
[class*="-3/5"]{ width: 60%; }
[class*="-2/5"]{ width: 40%; }
[class*="-1/5"]{ width: 20%; }