Grid System - Demo

dabblet.css

/* Grid System - Demo */

* {
	box-sizing: border-box;
}

.site-header {
	background: hotpink;
	padding: 20px;
}

.site-container {
	background: rgba(0,0,0,0.2);
	width: 		80%;
	margin: 	60px auto 0;
}

.g-mother:after {
	content: "";
	display: table;
	clear: both;
}

[class*="g-c"] {
	float: 	left;
}

[class*="g-c"]:last-of-type {
	 border: none;
}

.box {
	height: 		200px;
	background: 	rgba(255,0,0,0.3);
	margin-bottom: 	1px;
	border-right: 	1px solid white;
}

.g-c20 {
	width: 	20%;
}

.g-c50 {
	width: 	50%;
}

dabblet.html

<div class="site-container">
	<header class="site-header">
		<a href="#" class="site-logo">My logo</a>
	</header>
	<section class="g-mother">
		<div class="box g-c20 g-mother">
			<div class="box g-c50"></div>
			<div class="box g-c50"></div>
		</div>
		<div class="box g-c20"></div>
		<div class="box g-c20"></div>
		<div class="box g-c20"></div>
		<div class="box g-c20"></div>
	</section>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}