Responsive grid test

by lovromar

HTML

<div class="grid-container outline">
    <div class="row">
        <div class="col-2"><p>col-1</p></div> 
        <div class="col-4"><p>col-1</p></div>
        <div class="col-6"><p style="text-align:center;height:200px;background-color:yellow;">col-1</p></div> 
       
   
    </div> 
</div>

CSS

/* .outline {
  background-color:red;
}
*/

* {
    box-sizing:border-box;
}
.grid-container {
    margin:0 auto;
  width:100%;
    height:300px;
    max-width:700px;
    background-color:red;
  
}

row:before, row:after {
   content:"";
    display:table;
    clear:both;
}

[class*='col-'] {
    float:left;
    border:1px solid black;
    padding:0 15px;
}

    .col-1{
        width: 16.66%; 
    }
    .col-2{
        width: 33.33%; 
    }
    .col-3{
        width: 50%; 
    }
    .col-4{
        width: 66.664%;
    }
    .col-5{
        width: 83.33%;
    }
    .col-6{
        width: 100%;
    }

 @media all and (max-width:480px){
        .col-1{ width: 50%;        }
        .col-2{ width: 100%;    }
        .col-3{ width: 100%;    }
        .col-4{ width: 100%;    }
        .col-5{ width: 100%;    }
        .col-6{ width: 100%;      }
    }