Create a mobile-first, gutterless grid system using Sass

table-grid.scss

/* Table Grid Classes
--------------------------------------------- */

@media screen and (min-width: 810px) {

	%table-grid {
		display: block;
		float: left;
	}

	.table-one-half,
	.table-three-sixths,
	.table-two-fourths {
		@extend %table-grid;
		width: percentage(1/2);
	}

	.table-one-third,
	.table-two-sixths {
		@extend %table-grid;
		width: percentage(1/3);
	}

	.table-four-sixths,
	.table-two-thirds {
		@extend %table-grid;
		width: percentage(2/3);
	}

	.table-one-fourth {
		@extend %table-grid;
		width: percentage(1/4);
	}

	.table-three-fourths {
		@extend %table-grid;
		width: percentage(3/4);
	}

	.table-one-sixth {
		@extend %table-grid;
		width: percentage(1/6);
	}

	.table-five-sixths {
		@extend %table-grid;
		width: percentage(5/6);
	}
}

table-markup.html

<div id="my-block-1" class="my-block table-one-third">
	<p>Yay! Grids!</p>
</div>
<div id="my-block-2" class="my-block table-two-thirds">
	<p>Yay! Grids!</p>
</div>

Example use: