Grid12 en pourcentages

by Jean-Baptiste Audras

HTML

<div class="percent2"></div><!-- 
--><div class="percent8 bg010"></div><!-- 
--><div class="percent8 bg020"></div><!-- 
--><div class="percent8 bg030"></div><!-- 
--><div class="percent8 bg040"></div><!-- 
--><div class="percent8 bg050"></div><!-- 
--><div class="percent8 bg060"></div><!-- 
--><div class="percent8 bg070"></div><!-- 
--><div class="percent8 bg080"></div><!-- 
--><div class="percent8 bg090"></div><!-- 
--><div class="percent8 bg0A0"></div><!-- 
--><div class="percent8 bg0B0"></div><!-- 
--><div class="percent8 bg0C0"></div><!-- 
--><div class="percent2 0D0"></div>

CSS

body {
    margin: 0;
    padding: 0;
    background: #aaa;
    height: 100%;
    width: 100%;
}
.percent2 {
    margin: 0;
    padding: 0;
    background: #fff;
    height: 200px;
    width: 2%;
    display: inline-block;
}
.percent8 {
    margin: 0;
    padding: 0;
    height: 200px;
    width: 8%;
    display: inline-block;
}
.bg010 { background: #010; }
.bg020 { background: #020; }
.bg030 { background: #030; }
.bg040 { background: #040; }
.bg050 { background: #050; }
.bg060 { background: #060; }
.bg070 { background: #070; }
.bg080 { background: #080; }
.bg090 { background: #090; }
.bg090 { background: #0A0; }
.bg0A0 { background: #0B0; }
.bg0B0 { background: #0C0; }
.bg0C0 { background: #0D0; }