Responsive Grid with Gutters - Example Markup

1140px-grid.css

/* Grid
	12 column - http://responsive.gs 
--------------------------------------------- */
.row {
	padding-bottom: 0;
}

.col {
	float: left;
	width: 100%;
}

@media ( min-width : 768px ) {

	.gutters .col {
		margin-left: 2%;
	}

	.gutters .col:first-child {
		margin-left: 0;
	}
}


@media (min-width: 768px) {
	.gutters .span_1 { width: 6.5%;	}
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }
}

960px-grid.css

/* Grid
  960px - 12 column - http://responsive.gs
--------------------------------------------- */

.row {
	padding-bottom: 0;
}

.col {
	float: left;
	width: 100%;
}

@media ( min-width : 768px ) {

	.gutters .col {
		margin-left: 3%;
	}

	.gutters .col:first-child {
		margin-left: 0;
	}
}

@media ( min-width : 768px ) {

	.gutters .span_1 { width: 5.5%; }
	.gutters .span_2 { width: 14%; }
	.gutters .span_3 { width: 22.5%; }
	.gutters .span_4 { width: 31%; }
	.gutters .span_5 { width: 39.6%; }
	.gutters .span_6 { width: 48%; }
	.gutters .span_7 { width: 56.5%; }
	.gutters .span_8 { width: 65%; }
	.gutters .span_9 { width: 73.5%; }
	.gutters .span_10 { width: 82%; }
	.gutters .span_11 { width: 90.5%; }
	.gutters .span_12 { width: 99%; margin:0; }
}

functions.php

<?php

add_filter( 'body_class', 'child_body_classes' );
/**
 * Adds custom classes to the array of body classes.
 */
function child_body_classes( $classes ) {

	$classes[] = 'gutters';

	return $classes;

}

homepage.html

  <div class="full-width-content">
	<main class="content" role="main" itemscope itemtype="http://schema.org/CreativeWork">

		<div class="row row-id-1">

			<div class="col span_8">
				Some content that spans 8 columns
			</div>

			<div class="col span_4">
				Some content that spans 4 columns
			</div>
  
  		</div><!-- .row-id-1 -->

		<div class="row row-id-2">

			<div class="col span_12">
				Some content that spans 12 columns
			</div>

		</div><!-- .row-id-2 -->

  		<div class="row row-id-3">

			<div class="col span_2">
				Some content that spans 2 columns
			</div>

  			<div class="col span_4">
				Some content that spans 4 columns
			</div>

  			<div class="col span_6">
				Some content that spans 6 columns
			</div>

		</div><!-- .row-id-3 -->

  	</main>
</div>