A SASS mixin that allows you to create columns of varying widths on top of a 12 column grid system.
See Demo
Copy _fluid-grid.scss
into your SASS workflow and configure the default parameters.
$cols
is the number of column(s) or column count in a row.$mod
is the width of the column(s) based on a 12 column grid.$break
is the width at which the columns will break to 100% width and stack (as the default behavior).$fixed-gutter
is the default pixel width between columns (used when$gutter-type: 'fixed
).$fluid-gutter
is the default percentage width between columns (used when$gutter-type: 'fluid
).$gutter-type
is the default gutter type (allowed values are'fixed'
or'fluid'
).$no-gutter
is a boolean flag that indicates whether or not gutters will be used between columns.
The fg-col()
mixin accepts parameters that allow you to specify your columns on the fly from within your SASS. A
typical usage that would create three equal width columns with a gutter would look as follows:
.fg-demo {
@include fg-col(3);
}
<div>
<div class="fg-demo"></div>
<div class="fg-demo"></div>
<div class="fg-demo"></div>
</div>
The same thing without a gutter between the columns.
.fg-demo {
@include fg-col(3, $no-gutter: true);
}
<div>
<div class="fg-demo"></div>
<div class="fg-demo"></div>
<div class="fg-demo"></div>
</div>
Two columns that break to 100% width and stack when the viewport is less than 768px.
.fg-demo {
@include fg-col(2, $break: 768px);
}
<div>
<div class="fg-demo"></div>
<div class="fg-demo"></div>
</div>
...
...
...
...
The fluid-grid mixin uses floated elements which by their default nature are taken out of the normal flow of their wrapper element where the wrapper then acts like they were never there. If there is no non-floated content within the wrapper it won't have any height. Fixing this issue is now commonly known as a "clearfix". There are a few ways to fix this issue but perhaps the simplest is to add the following property to any wrapper that contains fluid-grid columns:
.wrapper {
overflow: auto;
}
<div class="wrapper">
<div class="fg-col"></div>
<div class="fg-col"></div>
</div>
Doing so will cause the wrapper element to respect the height of its children. For more information on how to clearfix elements please read: MDN CSS clear.
Works in all browsers that support CSS calc()
and is backwards compatible with browsers that don't only when
$gutter-type
is set to fluid
.