Use this mixin to easily create a flexible-grid layout.
The $fg-column
, $fg-gutter
and $fg-max-columns
variables must be defined in your base stylesheet to properly use the flex-grid function.
This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
{% highlight scss %} $fg-column: 60px; // Column Width $fg-gutter: 25px; // Gutter Width $fg-max-columns: 12; // Total Columns For Main Container div { width: flex-grid(4); // returns (315px / 1020px) = 30.882353%; margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%; p { width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; float: left; margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; } blockquote { float: left; width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; } } {% endhighlight %}