grid system

by lovromar

HTML

<div class="grid">
    <div class="grid__col--100"></div><!--
 --><div class="grid__col--20"></div><!--
 --><div class="grid__col--80"></div><!--
 --><div class="grid__col--25"></div><!--
 --><div class="grid__col--75"></div><!--
 --><div class="grid__col--30"></div><!--
 --><div class="grid__col--70"></div><!--
 --><div class="grid__col--33"></div><!--
 --><div class="grid__col--66"></div><!--
 --><div class="grid__col--40"></div><!--
 --><div class="grid__col--60"></div><!--
 --><div class="grid__col--50"></div><!--
 --><div class="grid__col--50"></div><!--
 --><div class="grid__col--60"></div><!--
 --><div class="grid__col--40"></div><!--
 --><div class="grid__col--70"></div><!--
 --><div class="grid__col--30"></div><!--
 --><div class="grid__col--75"></div><!--
 --><div class="grid__col--25"></div><!--
 --><div class="grid__col--80"></div><!--
 --><div class="grid__col--20"></div><!--
 --><div class="grid__col--100"></div><!--
 --><div class="grid__col--50"></div><!--
 --><div class="grid__col--50"></div><!--
 --><div class="grid__col--33"></div><!--
 --><div class="grid__col--33"></div><!--
 --><div class="grid__col--33"></div><!--
 --><div class="grid__col--25"></div><!--
 --><div class="grid__col--25"></div><!--
 --><div class="grid__col--25"></div><!--
 --><div class="grid__col--25"></div><!--
 --><div class="grid__col--20"></div><!--
 --><div class="grid__col--20"></div><!--
 --><div class="grid__col--20"></div><!--
 --><div class="grid__col--20"></div><!--
 --><div class="grid__col--20"></div><!--
 --><div class="grid__col--100"></div>
</div>

CSS

.grid {
    margin-left: -1.25%;
    margin-right: -1.25%;
}
[class*="grid__col--"] {
    margin-left: 1.25%;
    margin-right: 1.25%;
}
@media (min-width: 40em) { /* 640px */
    [class*="grid__col--"] {
        display: inline-block;
        vertical-align: top;
        zoom: 1; /* Fix for IE7 */
        *display: inline; /* Fix for IE7 */
        -webkit-box-sizing: border-box; /* Enables the use of padding without breaking the grid */
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .grid__col--20  { width: 17.5%; }
    .grid__col--25  { width: 22.5%; }
    .grid__col--30  { width: 27.5%; }
    .grid__col--33  { width: 30.833333333%; }
    .grid__col--40  { width: 37.5%; }
    .grid__col--50  { width: 47.5%; }
    .grid__col--60  { width: 57.5%; }
    .grid__col--66  { width: 64.166666666%; }
    .grid__col--70  { width: 67.5%; }
    .grid__col--75  { width: 72.5%; }
    .grid__col--80  { width: 77.5%; }
    .grid__col--100 { width: 97.5%; }
}

/* Demo Styles */

body {
    font-size: 100%;
    margin: 0 auto;
    max-width: 60em;
    padding: 0 1.25em;
}
.grid {
    background-color: #eee;
    padding-top: 2.5%;
}
[class*="grid__col--"] {
    background-color: #333;
    border-radius: .25em; /* 4 */
    margin-bottom: 2.5%;
    padding: 1.5em 0; /* 24 0 */
    position: relative;
}
[class*="grid__col--"]:after {
    bottom: 0;
    color: #fff;
    content: attr(class);
    font-family: monospace;
    font-size: 1em;
    font-weight: bold;
    left: 0;
    line-height: 2;
    padding: .75em 0; /* 12 0 */
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}