locomotive-boilerplate/www/modules/boilerplate/assets/styles/src/objects/_grid.scss

/* ==========================================================================
   Grid
   ========================================================================== */
@mixin grid {
	margin-left: -$gutter;
	letter-spacing: normal;
	font-size: 0;
}
.grid {
	@include grid;	
}

@mixin grid__item {
	display: inline-block;
	box-sizing: border-box;
	margin-bottom: $gutter;
	padding-left: $gutter;
	width: 100%;
	vertical-align: top;
	font-size: 16px;
}

@mixin whole {
	@include grid__item;

	width: 100%;
}

@mixin half {
	@include grid__item;

	@media (min-width: $from-small) {
		width: span(1/2);
	}
}

@mixin third {
	@include grid__item;

	@media (min-width: $from-medium) {
		width: span(1/3);
	}
}

@mixin two-thirds {
	@include grid__item;

	@media (min-width: $from-medium) {
		width: span(2/3);
	}
}

@mixin quarter {
	@include grid__item;

	@media (min-width: $from-medium) {
		width: span(1/4);
	}
}

@mixin two-quarters {
	@include grid__item;

	@media (min-width: $from-medium) {
		width: span(2/4);
	}
}

@mixin three-quarters {
	@include grid__item;

	@media (min-width: $from-medium) {
		width: span(3/4);
	}
}

@mixin fifth {
	@include grid__item;

	@media (min-width: $from-large) {
		width: span(1/5);
	}
}

@mixin two-fifths {
	@include grid__item;

	@media (min-width: $from-large) {
		width: span(2/5);
	}
}

@mixin three-fifths {
	@include grid__item;

	@media (min-width: $from-large) {
		width: span(3/5);
	}
}

@mixin four-fifths {
	@include grid__item;

	@media (min-width: $from-large) {
		width: span(4/5);
	}
}

@mixin sixth {
	@include grid__item;

	@media (min-width: $from-huge) {
		width: span(1/6);
	}
}

@mixin two-sixths {
	@include grid__item;

	@media (min-width: $from-huge) {
		width: span(2/6);
	}
}

@mixin three-sixths {
	@include grid__item;

	@media (min-width: $from-huge) {
		width: span(3/6);
	}
}

@mixin four-sixths {
	@include grid__item;

	@media (min-width: $from-huge) {
		width: span(4/6);
	}
}

@mixin five-sixths {
	@include grid__item;

	@media (min-width: $from-huge) {
		width: span(5/6);
	}
}