Simple Grid

dabblet.css

/*
 * Simple Grid
 */
 
.grid {
overflow:auto;
}

.grid > div {
float:left;
padding:0 12px;
}

.grid > div:first-child {
padding-left:0;
}

.grid > div:last-child {
padding-right:0;
}

.slice {
width:216px;
}

.slice.big {
width:456px;
}

.slice.full {
width:936px;
}




/**/





body {
width:936px;
margin:0 auto;
}

.grid {
background:#fff url(//griddle.it/936-16-24?color=black&num=0) top center;
margin:12px 0;
}

.grid > div:after {
content:"";
display:block;
background:hsla(30,90%,40%,.8);
height:72px;
}

.grid > div:not(:first-child) {
box-shadow:inset 1px 0 0 rgba(0,0,0,.3);
}

dabblet.html

<div class=grid>
<div class=slice></div>
<div class=slice></div>
<div class=slice></div>
<div class=slice></div>
</div>

<div class=grid>
<div class=slice></div>
<div class=slice></div>
<div class="slice big"></div>
</div>

<div class=grid>
<div class="slice big"></div>
<div class=slice></div>
<div class=slice></div>
</div>

<div class=grid>
<div class="slice big"></div>
<div class="slice big"></div>
</div>

<div class=grid>
<div class="slice full"></div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}