12-Unit Fluid Grid - Updated

by joplomacedo

HTML

<!-- example. uncomment last lines of css -->
<div class="g-container">
    <div class="g-row">
        <div class="g-unit g-unit--third"></div>
        <div class="g-unit g-unit--third"></div>
        <div class="g-unit g-unit--third g-unit--box">
            <div class="g-unit g-unit--half"></div>
            <div class="g-unit g-unit--half"></div>
            <div class="g-unit g-unit--half"></div>
            <div class="g-unit g-unit--half"></div>
            <div class="g-unit g-unit--half g-unit--pullhalf"></div>
        </div>
    </div>
    <div class="g-row">
        <div class="g-unit g-unit--4"></div>
        <div class="g-unit g-unit--8 g-unit--box">
            <div class="g-unit g-unit--third"></div>
            <div class="g-unit g-unit--third"></div>
            <div class="g-unit g-unit--third"></div>
            <div class="g-unit g-unit--full"></div>
        </div>
    </div>
</div>

CSS

/*
    row - max-width: 1100px;
    unit - padding-left: 15px, padding-right: 15px;
*/

.g-container {}

.g-row { max-width: 1100px; margin: 0 auto; font-size: 0; }

.g-unit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    min-height: 1px;
    padding-left:  15px; 
    padding-right: 15px;
    font-size: 16px; /* recoup font-size */
}

.g-unit.g-unit--box { padding-right: 0; padding-left: 0; font-size: 0;}

.g-unit--1 { width: 8.33333%;}
.g-unit--2 { width: 16.66667%; }
.g-unit--3, .g-unit--fourth { width: 25%; }
.g-unit--4, .g-unit--third { width: 33.33333%; }
.g-unit--5 { width: 41.66667%; }
.g-unit--6, .g-unit--half { width: 50%; }
.g-unit--7 { width: 58.33333%; }
.g-unit--8 { width: 66.66667%; }
.g-unit--9 { width: 75%; }
.g-unit--10 { width: 83.33333%; }
.g-unit--11 { width: 92.66667%; }
.g-unit--12, .g-unit--full { width: 100%; }

.g-unit--push1 { margin-right: 8.33333%; }
.g-unit--push2 { margin-right: 16.66667%; }
.g-unit--push3, .g-unit--pushfourth { margin-right: 25%; }
.g-unit--push4, .gunit--pushthird { margin-right: 33.33333%; }
.g-unit--push5 { margin-right: 41.66667%; }
.g-unit--push6, .g-unit--pushhalf { margin-right: 50%; }
.g-unit--push7 { margin-right: 58.33333%; }
.g-unit--push8 { margin-right: 66.66667%; }
.g-unit--push9 { margin-right: 75%; }
.g-unit--push10 { margin-right: 83.33333%; }
.g-unit--push11 { margin-right: 92.66667%; }

.g-unit--pull1 { margin-left: 8.33333%; }
.g-unit--pull2 { margin-left: 16.66667%; }
.g-unit--pull3, .g-unit--pullfourth { margin-left: 25%; }
.g-unit--pull4, .g-unit--pullthird { margin-left: 33.33333%; }
.g-unit--pull5 { margin-left: 41.66667%; }
.g-unit--pull6, .g-unit--pullhalf { margin-left: 50%; }
.g-unit--pull7 { margin-left: 58.33333%; }
.g-unit--pull8 { margin-left: 66.66667%; }
.g-unit--pull9 { margin-left: 75%; }
.g-unit--pull10 {...