Full width css grid

by Lore ZZ

HTML

<div><span class="subdiv">1</span></div>
<div><span class="subdiv">2</span></div>
<div><span class="subdiv">3</span></div>
<div><span class="subdiv">4</span></div>
<div><span class="subdiv">5</span></div>
<div><span class="subdiv">6</span></div>
<div><span class="subdiv">7</span></div>
<div><span class="subdiv">8</span></div>
<div><span class="subdiv">9</span></div>
<div><span class="subdiv">10</span></div>
<div><span class="subdiv">11</span></div>
<div><span class="subdiv">12</span></div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
}
div {
    width: 25%;
    height: 100px;
    float: left;
    padding: 1px;
    background: #e7e7e7;
}
.subdiv {
    width: 100%;
    height: 100%;
    background: #4679BD;
    float: left;
    margin: 1px;
    padding: 10px;
    color: #f4f4f4;
}