Responsive Simple Grid System

YARSGS

HTML

<div class="grid-container">
    <!-- <div class="grid-row">
        <div class="grid-col_5 add-color1">Five</div>
        <div class="grid-col_5 add-color2">Five</div>
        <div class="grid-col_5 add-color1">Five</div>
        <div class="grid-col_5 add-color2">Five</div>
        <div class="grid-col_5 add-color1">Five</div>
    </div> -->

    <div class="grid-row">
        <div class="grid-col_1 add-color1">Four</div>
        <div class="grid-col_1 add-color2">Four</div>
        <!-- <div class="grid-col_4 add-color1">Four</div>
        <div class="grid-col_4 add-color2">Four</div> -->
    </div>

    <!-- <div class="grid-row">
        <div class="grid-col_3 add-color1">Three</div>
        <div class="grid-col_3 add-color2">Three</div>
        <div class="grid-col_3 add-color1">Three</div>
    </div>
    
    <div class="grid-row">
        <div class="grid-col_2 add-color1">Two</div>
        <div class="grid-col_2 add-color2">Two</div>
    </div>
    
    <div class="grid-row">
        <div class="grid-col_1 add-color1">One</div>
    </div> -->
</div>


<!-- <div class="grid-container">
    <div class="grid-row">
        <div class="grid-col_5 add-color1">One Fifth</div>
        <div class="grid-col_5c add-color2">Four Fifths</div>
    </div>

    <div class="grid-row">
        <div class="grid-col_4 add-color1">One Fourth</div>
        <div class="grid-col_4c add-color2">Three Fourths</div>
    </div>

    <div class="grid-row">
        <div class="grid-col_3 add-color1">One Third</div>
        <div class="grid-col_3c add-color2">Two Thirds</div>
    </div>

    <div class="grid-row">
        <div class="grid-col_2 add-color1">One Half</div>
        <div class="grid-col_2 add-color2">One Half</div>
    </div>

    <div class="grid-row">
        <div class="grid-col_1 add-color1">One One</div>
    </div>
</div> -->

CSS

body { margin: 10px; }

.grid-container { margin: 0 auto; }

.grid-row { width: 100%; }
    .grid-row > * {
        -webkit-transition    : all 400ms ease-out;
        -moz-transition        : all 400ms ease-out;
        -o-transition        : all 400ms ease-out;
        -ms-transition        : all 400ms ease-out;
        transition            : all 400ms ease-out;    
    }
    .grid-row:before, .grid-row:after { content: ""; display: table; }
    .grid-row:after { clear: both; }
    .grid-row { *zoom: 1; }

.grid-col_1, .grid-col_2, .grid-col_3, .grid-col_3c, .grid-col_4, .grid-col_4c, .grid-col_5, .grid-col_5c {
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1.5%;
    float: left;
    display: block;
}
    .grid-col_1 { width: 98%; }
    .grid-col_2 { width: 48%; }
    .grid-col_3 { width: 31.3333333333%; }
    .grid-col_4 { width: 23%; }
    .grid-col_5 { width: 18%; }
    
    .grid-col_3c { width: 64.6666666667%; }
    .grid-col_4c { width: 73%; }
    .grid-col_5c { width: 78%; }

.add-color1 { background: #ccc; }
.add-color2 { background: #eee; }


/* ------------------------------------------ */


@media only screen and (min-width: 1200px) {  }
@media only screen and (max-width: 1200px) {  }
@media only screen and (max-width: 1024px) {  }

@media handheld, only screen and (max-width: 768px) {
    .grid-col_4 { width:48%; }
    .grid-col_4c { width: 48%; }
}

@media handheld, only screen and (max-width: 480px) {
    .grid-col_2 { width:98%; }
    .grid-col_3 { width:98%; }
    .grid-col_4 { width:98%; }
    .grid-col_5 { width:98%; }

    .grid-col_2c { width: 98%; }
    .grid-col_3c { width: 98%; }
    .grid-col_4c { width: 98%; }
    .grid-col_5c { width: 98%; }
}

@media handheld, only screen and (max-width: 320px) {
    .grid-container { width: 100% !important; max-width: 100% !important; }
    .grid-col_1, .grid-col_2, .grid-col_3, .grid-col_3c, .grid-col_4, .grid-col_4c, .grid-col_5, .grid-col_5c {
            width: 92%;
           ...