Susy: Fluid grid based on maximum px values

Question

I am trying to make a fluid grid which at its maximum width has these values:

http://gridcalculator.dk/#/1224/12/40/56

When the browser is resized below 1264px (to allow for 20px padding on the body), everything (margins, gutters and columns) should scale down proportionally. Is this possible?

I have tried these approaches:

First try:

$total-columns  : 12;
$column-width   : 56px;
$gutter-width   : 40px;
$grid-padding   : 56px;

This doesn't work because the padding is fixed at 56px and doesn't scale down.

Second try:

$total-columns  : 12;
$column-width   : 4.575163%;
$gutter-width   : 3.267973%;
$grid-padding   : 4.575163%;

$container-width: 1224px;

This almost works but the grid padding is greater than the column width for some reason...

What am I missing? Thanks!

Answer 1

Susy 1.0 handles grid-padding differently from columns and gutters. In order to achieve what you are looking for, we would have to require special classes on both the first and last elements in a row. That is how Susy 0.9 worked, but it added a lot of complexity for a feature most people complained about. Now, with grid-padding added to the container rather than the elements, what you want is not possible.

The grid padding is now added directly to the container, without any math. In your first example, that means it doesn't flex. In your second example, it is interpreted by browsers as a percentage of the entire viewport, while gutters are a percentage of the container, thus resulting in different widths.