Experimenting with CSS layout stuff. Inspired by "Laziness in the Time of Responsive Design by Ethan Marcotte" https://vimeo.com/165061923#t=1076s | This is a work in progress: NONE OF THIS CODE IS FUNCTIONAL (yet)!

test.html

<div class="row">
	
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	<div class="col" style="min-height: 100px; background: #ccc"></div>
	
</div>

test1.css

/* 3-col layout, unlimited. */
@media (min-width: 44em) {
	.row::after {
		content: "";
		display: table;
		clear: both;
	}
	.col {
		width: 45%;
		margin-right: 5%;
		float: left;
	}
	/* Select every second cell: */
	.col:nth-child(2n) { margin-right: 0; } /* `n` is a counter, starting at 0; e.g. 2*0, 2*1, 2*2 ... */
	.col:nth-child(2n+1) { clear: left; } /* Same as above, but starting at 1. */
}
@media (min-width: 68.75em) {
	.col { width: 30%;}
	/* Select every third cell: */
	.col:nth-child(3n) { margin-right: 0; }
	.col:nth-child(3n+1) { clear: left; }
}
@media (min-width: 81.25em) {
	/* Select every fourth cell: */
	.col:nth-child(4n) { margin-right: 0; }
	.col:nth-child(4n+1) { clear: left; }
}
@media (min-width: 106.25em) {
	/* Select every fifth cell: */
	.col:nth-child(5n) { margin-right: 0; }
	.col:nth-child(5n+1) { clear: left; }
}
@media (min-width: 131.25em) {
	/* Select every sixth cell: */
	.col:nth-child(6n) { margin-right: 0; }
	.col:nth-child(6n+1) { clear: left; }
}
@media (min-width: 150em) {
	/* Select every seventh cell: */
	.col:nth-child(7n) { margin-right: 0; }
	.col:nth-child(7n+1) { clear: left; }
}
@media (min-width: 162.5em) {
	/* Select every eighth cell: */
	.col:nth-child(8n) { margin-right: 0; }
	.col:nth-child(8n+1) { clear: left; }
}

test2.css

/* 3-col layout, unlimited. */
@media (min-width: 44em) {
	.row::after {
		content: "";
		display: table;
		clear: both;
	}
	.row { margin-left: -5%; }
	.col {
		width: calc(50% - 5%);
		margin-left: 5%;
		float: left;
	}
	/* Select every second cell: */
	/* `n` is a counter, starting at 0; e.g. 2*0, 2*1, 2*2 ... */
	.col:nth-child(2n+1) { clear: left; } /* Starting at 1. */
}
@media (min-width: 68.75em) {
	.col { width: calc(33.3333333% - 5%); }
	/* Select every third cell: */
	.col:nth-child(3n+1) { clear: left; }
}
@media (min-width: 81.25em) {
	.col { width: calc(25% - 5%); }
	/* Select every fourth cell: */
	.col:nth-child(4n+1) { clear: left; }
}
@media (min-width: 106.25em) {
	.col { width: calc(20% - 5%); }
	/* Select every fifth cell: */
	.col:nth-child(5n+1) { clear: left; }
}
@media (min-width: 131.25em) {
	.col { width: calc(16.6666666% - 5%); }
	/* Select every sixth cell: */
	.col:nth-child(6n+1) { clear: left; }
}
@media (min-width: 150em) {
	.col { width: calc(14.2857142% - 5%); }
	/* Select every seventh cell: */
	.col:nth-child(7n+1) { clear: left; }
}
@media (min-width: 162.5em) {
	.col { width: calc(12.5% - 5%); }
	/* Select every eighth cell: */
	.col:nth-child(8n+1) { clear: left; }
}