Autogrid

by kthornbloom

HTML

<div class="grid grid-pad" data-grid-min="250">
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
</div> 

<div class="grid grid-pad">
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
	<div class="col-2"><p>col-2</p></div> 
</div>

SCSS

/* GRID SYSTEM
=========================================*/
[class*='grid-'] {
	display: flex;
	flex-wrap:wrap;
}
.grid-pad {
	[class*='col-'] {
		padding:$padding
	}
}
[class*='col-'] {
	background: rgba(0,0,0,.4);
	p {
		background: rgba(0,0,0,.4);
	}
}
.col-1 {width:8.33%}
.col-2 {width:16.66%}
.col-3 {width:25%}
.col-4 {width:33.33%}
.col-5 {width:41.66%}
.col-6 {width:50%}
.col-7 {width:58.33%}
.col-8 {width:66.66%}
.col-9 {width:75%}
.col-10 {width:83.33%}
.col-11 {width:91.66%}
.col-12 {width:100%}

@media screen and (max-width: 960px) {
	.grid-stepped-720 {
		.col-1 {width:16.66%}
		.col-2 {width:25%}
		.col-3 {width:33.33%}
		.col-4 {width:41.66%}
		.col-5 {width:50%}
		.col-6 {width:58.33%}
		.col-7 {width:66.66%}
		.col-8 {width:75%}
		.col-9 {width:83.33%}
		.col-10 {width:91.66%}
	}
	.grid-960 [class*='col-'],
	.grid-stepped-960 [class*='col-'] {
		width:100%;
	}
}
@media screen and (max-width: 720px) {
	.grid-stepped-512 {
		.col-1 {width:16.66%}
		.col-2 {width:25%}
		.col-3 {width:33.33%}
		.col-4 {width:41.66%}
		.col-5 {width:50%}
		.col-6 {width:58.33%}
		.col-7 {width:66.66%}
		.col-8 {width:75%}
		.col-9 {width:83.33%}
		.col-10 {width:91.66%}
	}
	.grid-720 [class*='col-'],
	.grid-stepped-720 [class*='col-'] {
		width:100%;
	}
}
@media screen and (max-width: 512px) {
	.grid-512 [class*='col-'],
	.grid-stepped-512 [class*='col-'] {
		width:100%;
	}
}

JavaScript

function autogrid() {
	$('[data-grid-min]').each(function(){
		var that = this;
		$(this).find('> div').css('width','');
		var fullWidth = parseInt($(that).width()),
			colWidth = parseInt($(that).find('> div').width()),
			minWidth = parseInt($(that).attr("data-grid-min")),
			newWidth = parseInt(100 / (Math.floor(fullWidth / minWidth)));

			if(fullWidth < minWidth){
				$(that).find('> div').css('width','100%');
			} else if (colWidth < minWidth){
				$(that).find('> div').css('width',newWidth+'%');
			}
	});
}

autogrid();