// Grid classes based on bootstrap 3 classnames.
// * Item height matches tallest item in row
// * No need for element inside item to utilize gutter
// * No awkwardly rounded percentages
// * No negative margin hacks
// * No clear-fix hacks
$numColumns: 12;
$gutterWidth: 15px;

// Row.
.row {
	display: grid;
	grid-template-columns: repeat($numColumns, 5fr); // Uniform columns. No need for rounded percentages to calculate widths.
	grid-gap: $gutterWidth; // Actual gutter width. No need for negative margin hack.
}

// Column.
[class^=col-] {
	grid-column-end: span $numColumns; //Full width fallback when no column size is define for the screen size.
}

// Loop through responsive breakpoints.
@each $size, $abbr in (0,xs),(768px,sm),(992px,md),(1200px,lg){
	@media (min-width: $size) {
		// Loop through col classes.
		@for $i from 1 through $numColumns {
			.col-#{$abbr}-#{$i} {
				grid-column-end: span $i;
			}
		}
	}
}