Sass Flex Grid

Why?

This version adds some key features not available with other versions:

Any number of breakpoint classes with one simple config

$grid-breakpoints: (
	extra-small: (
		name: xs, // ".col-xs-*"
		columns: 4, // 4 colums at this breakpoint
		gutter: 16px, // 16 pixels between each column
		min-width: 0 // default, no min width
	),
	small: (
		name: sm, // ".col-sm-*"
		columns: 4, // 4 colums at this breakpoint
		gutter: 16px, // 16 pixels between each column
		min-width: 36em // min-with 576px
	),
	medium: (
		name: md, // ".col-md-*"
		columns: 12, // 12 colums at this breakpoint
		gutter: 24px, // 24 pixels between each column
		min-width: 48em // min-with 768px
	),
	large: (
		name: foo, // ".col-foo-*"
		columns: 12, // 12 colums at this breakpoint
		gutter: 24px, // 24 pixels between each column
		min-width: 64em // min-with 1024px
	)
);
			

Mixins for EVERYTHING

.my-custom-column {
	@include col(1/4, 16);
}
			

.my-custom-column {
	box-sizing: border-box;
	flex: 0 0 auto;
	position: relative;
	flex-basis: 25%;
	max-width: 25%;
	padding-right: 8;
	padding-left: 8;
}
			

Remove gutters for edge to edge layouts with 1 simple class .no-gutter

Ability to prefix the grid classes for namespacing

$grid-prefix: 'namespace-';
			

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at any viewport widths. Defaults are xs, sm, md, lg, and xl but you can add as many or as few breakpoints as you see fit.

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-2 {
	flex-basis: 50%;
}
			

Simple Syntax

All you need to remember is row, column, content.

Offsets

Offset a column

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

Nested Grids

Nest grids inside grids inside grids.

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

.center-

.end-

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

.top-

.middle-

.bottom-

Distribution

Add classes to distribute the contents of a row or column.

.around-

.between-

Reordering

Add classes to reorder columns.

.first-

.last-

Reversing

.reverse