Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
The grid component from my personal front-end framework. Brief demo here:
// REQUIRED VARS. Defaults to a 950px wide, 24-column grid that has 30px wide units and 10px wide
// gutters. If you do the fluid grid, then this 950/24/30/10px size will become the maximum size.
$grid_type: fixed !default
$grid_columns: 24 !default
$grid_column_width: 30 !default
$grid_gutter_width: 10 !default
// GENERATED VARS. You can ignore these.
$grid_full_width: $grid_columns * $grid_column_width + $grid_columns * $grid_gutter_width - $grid_gutter_width
$grid_column_width_percent: ($grid_column_width / $grid_full_width * 100) * 1%
$grid_gutter_width_percent: ($grid_gutter_width / $grid_full_width * 100) * 1%
// CONTAINER MIXIN. A container is an element that holds grid based elements. All grid layouts should
// be wrapped with a container. In fixed grids, the width of containers is the total of your columns and
// gutters. In fluid grids, that's the max-width. You can stack containers vertically down the page all
// you like. For example, you may have a container for your header, one for content, and one for your
// footer. To specify a container, either use this mixin in your SASS (+container) or apply the CSS
// class "container" via HTML (class=container).
=container($type: none, $box_padding_multiplier: 1)
@if $grid_type == "fixed"
width: #{($grid_column_width + $grid_gutter_width) * $grid_columns - $grid_gutter_width}px
@if $type == "box"
padding-left: #{$grid_gutter_width * $box_padding_multiplier}px
padding-right: #{$grid_gutter_width * $box_padding_multiplier}px
@if $grid_type == "fluid"
max-width: #{$grid_full_width / $base_font_size_unitless}em
padding: 0 #{$box_padding_multiplier}em
margin: 0 auto
@if $grid_type == "fluid"
$span_width_percent: ($grid_column_width_percent * $n + ($grid_gutter_width_percent * ($n - 1)))
width: #{$span_width_percent}
width: #{$grid_column_width * $n + $grid_gutter_width * ($n - 1)}px
@if $n == $grid_columns
margin: 0
// COLUMN MIXIN. Column CSS classes are also generated. You can make an element span a specific
// number of columns either by using this mixin in your SASS for that element (such as +column(4)),
// or by speficing the CSS class in your HTML (such as class=column-4).
float: left
@if $grid_type == "fluid"
margin-right: #{$grid_gutter_width_percent}
margin-right: #{$grid_gutter_width}px
@if $n == $grid_columns
margin: 0
// BOX MIXIN. A "box" is a column that has inner padding the width of the gutters. It's useful when
// you intend to have a background color or other screen on the element, such that content butting up
// aganist the interior edges of the element would be undesirable. Use it just like the column mixin
// (+box(4) or class=box-4).
float: left
@if $grid_type == "fluid"
$box_width_percent: ($grid_column_width_percent * $n + ($grid_gutter_width_percent * ($n - 1)) - ($grid_gutter_width_percent * 2))
width: #{$box_width_percent}
padding: #{$grid_gutter_width_percent}
margin-right: #{$grid_gutter_width_percent}
width: #{$grid_column_width * $n + $grid_gutter_width * ($n - 1) - $grid_gutter_width * 2}px
padding: #{$grid_gutter_width}px
margin-right: #{$grid_gutter_width}px
@if $n == $grid_columns
margin: 0
// These mixins append or prepend the specificed number of blank columns to an element, using padding.
// Note that because they use padding, they are not compatible with boxes. I need to make a margin-based
// version for boxes, but haven't gotten there, yet. Use them as with the other mixins (+append(2) or
// class=prepend-2).
@if $grid_type == "fluid"
padding-right: #{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n} !important
padding-right: #{$grid_column_width * $n + $grid_gutter_width * $n}px !important
@if $grid_type == "fluid"
padding-left: #{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n} !important
padding-left: #{$grid_column_width * $n + $grid_gutter_width * $n}px !important
// These mixins push or pull an element out of the flow by the specified number of columns. Use as with
// the other mixins (+push(4) or class=pull-4).
float: left
margin-bottom: $base_line_height
@if $grid_type == "fluid"
margin-left: -#{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n}% !important
margin-left: -#{$grid_column_width * $n + $grid_gutter_width * $n}px !important
float: right
margin-bottom: $base_line_height
@if $grid_type == "fluid"
margin-right: -#{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n}% !important
margin-right: -#{$grid_column_width * $n + $grid_gutter_width * $n}px !important
margin-right: 0 !important
// Generate the CSS classes.
@for $n from 1 to $grid_columns + 1
@for $n from 1 to $grid_columns + 1
@for $n from 1 to $grid_columns + 1
@for $n from 1 to $grid_columns
@for $n from 1 to $grid_columns
@for $n from 1 to $grid_columns / 2 + 1
@for $n from 1 to $grid_columns / 2 + 1

Great looking grid generator. I'm curious, what are the cons that you mentioned in your screen cast about this grid system?

I've never seen the box mixins, very interesting. How would you handle adding a border on the box elements? Adding a border would break the grid, right?

Does the grid break when you have grids inside of box elements?

Thanks for sharing


jcroft commented Mar 22, 2011

You've hit on most of the downsides to this. Which, really, aren't downsides so much as things I've yet to add. But yeah, as of now, borders on the elements break the grid, and the grid does break down if you place grid units instead of box elements. Both things I hope to work out at some point. :)

Thanks for the reply. One more thing, can you tell me what browsers this supports?

Very cool, I especially like fluid vs fixed option. I'm curious, though - wouldn't setting an explicit width to the parent row imply fixed width even if fluid calculations are used?

Have you seen Olav Bjorkoy's 'contextual fluid grids' ( It's remarkably powerful for a very small number of lines. I made a few edits to it ( but have not yet used it beyond a few experiments - very interested to see what other's are learning and what I can incorporate. Thanks for sharing!


jcroft commented Mar 28, 2011

Hi Harlan:

I set an explicit maximum width on the fluid option, so that line length and such don't get to long, but it's still fluid as it gets smaller.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment