Simply Mobile First Responsive grid system

gistfile1.css

/**
 *
 *  For Prototyping - Debugger
 *
**/
.container-* { min-height: 40px; outline: 1px solid #cccccc; }
.row { min-height: 40px; outline: 2px solid #00ff00; }
.block1, .block2, .block2-2, .block3 { min-height: 40px; outline: 2px solid #ff0000; } 





/* ====================================================================================================================== */
/* ====================================================================================================================== */
/**
 *
 * RESET
 * - Clear all default margins
 *
**/

* { padding: 0; margin: 0; }	
html, 
html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
body { font-family: Arial; font-size: 1em; }






/* ====================================================================================================================== */
/* ====================================================================================================================== */
/**
 *
 * Static GRID
 * - For fixed web sites
 *
**/

/* Static Grid */
	.container-stc { width: 1028px; margin: 0 auto; }
	
	.container-stc .block1 { width: 293px; min-height: 30px; display: inline-block; vertical-align: top; }
	.container-stc .block2 { width: 660px; min-height: 30px; display: inline-block; vertical-align: top; }
	.container-stc .block3 { width: 1028px; min-height: 30px; display: inline-block; vertical-align: top; }
	.container-stc .block2-2 { width: 477px; min-height: 30px; display: inline-block; vertical-align: top; }
	
	.container-stc .block1:nth-child(1n+2), 
	.container-stc .block2-2:nth-child(1n+2), 
	.container-stc .block2:nth-child(2n+2) { margin-left: 70px; }
	
	.container-stc .begin  { margin-left: 0 !important; }

	
	
	
	
/* ====================================================================================================================== */
/* ====================================================================================================================== */
/**
 *
 * Responsive GRID
 * - Mobile First
 *
**/

/* Mobile First */
	.container-rwd { width: 95%; margin: 0 auto; }

	.row, 
	.container-rwd .block1, 
	.container-rwd .block2, 
	.container-rwd .block3,
	.container-rwd .block2-2	{ width: 100%; display: inline-block; vertical-align: top; }

@media (min-width: 37.500em) { /* 600px - Mobile */
	.container-rwd  { width: 37.500em; }

	.container-rwd .block1, 
	.container-rwd .block2, 
	.container-rwd .block2-2 { width: 18em; }
	
	.container-rwd .block1:nth-child(1n + 2),
	.container-rwd .block2:nth-child(1n + 2),
	.container-rwd .block2-2:nth-child(1n + 2) { margin-left: 1.222222em; }
	
	.container-rwd .block1:nth-child(1n + 3),
	.container-rwd .block2:nth-child(1n + 3) { margin-left: 0; }
}

@media (min-width: 50em) { /* 800px - Tablet */
	.container-rwd { width: 48em; }

	.container-rwd .block1, 
	.container-rwd .block2, 
	.container-rwd .block2-2 { width: 23.2555em; }
}
 
@media (min-width: 56.25em) { /* 900px - Tablet */
	.container-rwd { width: 56.25em; }
	
	.container-rwd .block1 { width: 16.7999em; }
	.container-rwd .block2 { width: 36.5544em; }
	.container-rwd .block2-2 { width: 26.6666em; }
	
	.container-rwd .block1:nth-child(1n + 2),
	.container-rwd .block2:nth-child(1n + 2),
	.container-rwd .block2-2:nth-child(1n + 2) { margin-left: 2.6em; }
}

@media (min-width: 68.75em) { /* 1100px - Desktop */
	.container-rwd {	width: 68.75em; }
	
	.container-rwd .block1 { width: 20.89999em; }
	.container-rwd .block2 { width: 44.777777em; }
	.container-rwd .block2-2 { width: 32.88888em; }
	
	.container-rwd .block1:nth-child(1n + 2),
	.container-rwd .block2:nth-child(1n + 2),
	.container-rwd .block2-2:nth-child(1n + 2) { margin-left: 2.7em; }
}

@media (min-width: 75.000em) { /* 1200px - Desktop */
	.container-rwd {	width: 75.000em; }
	
	.container-rwd .block1 { width: 23em; }
	.container-rwd .block2 { width: 48.99999em; }
	.container-rwd .block2-2 { width: 36em; }
}