sistema de grid

.conteudo{
    max-width: 1280px;
    width: 80%;
    margin: 0 auto;
    padding: 5px;
}
.limpa{
    clear: both;
    overflow: hidden;
    display: block;
}
[class*='caixa-']{
    width: 100%;
    float: left;
    min-height: 1px;
}
.caixa{
    position: relative;
    margin:  15px;
}
@media screen and (min-width: 320px){
    .caixa-p-1{width: 8.33333%}
    .caixa-p-2{width: 16.66667%}
    .caixa-p-3{width: 25%}
    .caixa-p-4{width: 33.33333%}
    .caixa-p-5{width: 41.66667%}
    .caixa-p-6{width: 50%}
    .caixa-p-7{width: 58.33333%}
    .caixa-p-8{width: 66.66667%}
    .caixa-p-9{width: 75%}
    .caixa-p-10{width: 83.33333%}
    .caixa-p-11{width: 91.66667%}
    .caixa-p-12{width: 100%}
}
@media screen and (min-width: 640px){
    .caixa-m-1{width: 8.33333%}
    .caixa-m-2{width: 16.66667%}
    .caixa-m-3{width: 25%}
    .caixa-m-4{width: 33.33333%}
    .caixa-m-5{width: 41.66667%}
    .caixa-m-6{width: 50%}
    .caixa-m-7{width: 58.33333%}
    .caixa-m-8{width: 66.66667%}
    .caixa-m-9{width: 75%}
    .caixa-m-10{width: 83.33333%}
    .caixa-m-11{width: 91.66667%}
    .caixa-m-12{width: 100%}
}
@media screen and (min-width: 960px){
    .caixa-g-1{width: 8.33333%}
    .caixa-g-2{width: 16.66667%}
    .caixa-g-3{width: 25%}
    .caixa-g-4{width: 33.33333%}
    .caixa-g-5{width: 41.66667%}
    .caixa-g-6{width: 50%}
    .caixa-g-7{width: 58.33333%}
    .caixa-g-8{width: 66.66667%}
    .caixa-g-9{width: 75%}
    .caixa-g-10{width: 83.33333%}
    .caixa-g-11{width: 91.66667%}
    .caixa-g-12{width: 100%}
}