block-grid.scss

// Block Grid
// Technique adapted from Foundation 5 for Bootstrap 3.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
// Original LESS Version by Christopher Mitchell (https://gist.github.com/ChrisTM)
// Converted to SCSS by Rasmus Jürs (https://github.com/Jursdotme)
// Changes by Kedar Vaidya
 
@import "bootstrap/variables";
@import "bootstrap/mixins";

$block-grid-gutter-width: $grid-gutter-width/2;

[class*="block-grid-"] {
	display: block;
	padding: 0;
	@include clearfix();
}

.block-grid-item {
	display: inline;
	margin: 0;
	height: auto;
	float: left;
	list-style: none;

	> .img-responsive {
		width: 100%;
	}
}

@mixin block-grid ($per-row, $gutter-width: $block-grid-gutter-width) {
	margin: -($gutter-width/2);

	& > .block-grid-item {
		padding: ($gutter-width/2);
		width: (100%/$per-row);

		$nth-equation: #{$per-row}n+'+'+1;
		&:nth-of-type(n) { clear: none; }
		&:nth-of-type(#{$nth-equation}) { clear: both; }
	}
}

@mixin block-grids($size, $gutter-width: $block-grid-gutter-width) {
	$i: 1;

	@while $i <= 12 {
		.block-grid-#{$size}-#{$i}  { @include block-grid($i, $gutter-width); }
		$i: $i + 1;
	}
}

@include block-grids(xs);
@media (min-width: $screen-sm-min) { @include block-grids(sm) }
@media (min-width: $screen-md-min) { @include block-grids(md) }
@media (min-width: $screen-lg-min) { @include block-grids(lg) }