GRID

by LyndseyB

HTML

<div class="container">
    <div class="grid12"> Full Width </div>
</div>

<div class="container">    
    <div class="grid6"> Half </div> 
    <div class="grid6 last"> Half </div>
</div>

<div class="container">    
    <div class="grid3"> 1/4 </div>
    <div class="grid3"> 1/4 </div>
    <div class="grid3"> 1/4 </div>
    <div class="grid3 last"> 1/4 </div>
</div>

<div class="container">
    
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1"> 1/12 </div>
    <div class="grid1 last"> 1/12 </div>
    
</div>

CSS

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

html, body { font-size: 100%; }

.container { 
    width:100%;
    margin: 0 0 20px 0;
}

.container:after {
  content: "";
  display: table;
  clear: both;
}

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
    float:left; 
    background:#e3e2de;       
    margin:0 2% 0 0;    
    padding:10px;
}

.grid1 { width: 6.5% }
.grid3 { width:23.5%; }
.grid6 { width:49%; }
.grid12 { width:100%; }
.last { margin-right:0; }