Simple Sass Grid Framework

Simple Sass Grids

$content_width: 960px
$margin_size: 20px
$columns: (1, 2, 3, 4, 5, 6)
$column_width: ($content_width - (( length($columns) - 1 ) * $margin_size )) / length($columns)

@function grid_width($n: 1)
	@if ($n < 1)
		@return $column_width
	@return ($column_width * $n) + (($n - 1) * $margin_size)

.grids
	@extend .clearfix
	width: $content_width
	clear: both
	.grid
		margin-right: $margin_size
		width: grid_width(0)
		float: left
		& + .grid:last-child
			margin-right: 0
			float: right  // If grid size contains pixel fractions then the final column will not sit flush to right edge
	@each $column_num in $columns
		.grid-#{$column_num}
			width: grid_width($column_num)

.clearfix
	display: inline-block
	&::after
		content: "."
		display: block
		clear: both
		visibility: hidden
		line-height: 0
		height: 0
html[xmlns] .clearfix
	display: block
* html .clearfix
	height: 1%

How To Customise

Simply edit the variables at the top of the file.

• $content_width - This is the total width of the grid container
• $margin_size - This is the size of the gutter between columns
• $columns - This is a list of all the columns. If you want more simply add more numbers into the list. If you want less simply remove some numbers from the list. An example would be (1, 2, 3, 4) if you want 4 columns
• $column_width - This is the initial column width. Don't edit this variable

How to use

This is very easy. Wrap your columns in a div with a class of grids.
Within this div then place your columns by giving them a class of gird and then grid-n (n being the number of columns you wish it to stretch over)

There you go finished. Super easy to customise and really quick and simple to use.

Closing Statements

This was only a quickly put together section of Sass to demonstrate it's use. The gist doesn't contain support for older browsers and uses several CSS3 selectors meaning IE will likely have a small fit.