How to set a maximum container-width in Susy that only the padding/margin keeps growing on larger viewports?

Question

In my largest desktop view/breakpoint i tried to accomplish the same behaviour like on the Susy demo page ( http://susy.oddbird.net/demos/magic/ ) - that when the container maximum width is reached only the padding or margin on each side is growing while the container itself stays at its maximum-width.

But i am still a bit confused about a few points like the preferable unit and what's the best function to accomplish the described padding/margin behaviour.

My general Susy settings at the moment are the following:

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

The specific Scss part looks like that. I've included a container and flanked it with a margin via squish:

.sectionwrap{
    @include container;
    @include squish(3,3);
    @include breakpoint($medium) {
        @include squish(2,2);
    }
    @include breakpoint($small) {
        @include squish(1,1);
    }
}

But the problem is that the container and the squished areas both grow and grow and grow proportionally. Probably one flaw is that the used units are percentages? Would it be more reasonable to use em or rem instead?

Means when summed up and the maximum width is reached (number of columns * (column-width + gutter-width)) automatically only the squished areas keep on growing in theory? But i tried and it failed.

I also tried to set:

$container-width: 1000px;

But also no luck. Any hints are appreciated. Best regards Ralf

Update: I've rearranged my site to mobile first and thought that i got the whole Susy grid concept which was a little bit mislead by the squish() incident at first. :s But somehow i guess i do something wrong again.

// breakpoint variable set for Breakpoint - value is converted to em by Breakpoint
$fivehundred: min-width 500px;   

//basic Susy settings for the initial mobile viewport
$total-columns: 8;  
$column-width: 3em;
$gutter-width: 1em;
$grid-padding: 1em;

//modified Susy setting for a larger viewport
//intentionally chose larger numbers to see a significant change at the breakpoint
$largerviewport: 12,5em,1em,1em;

//the main content area wrapper class where i initially wanted to enlarge the container
//at each breakpoint step by step
.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($largerviewport);
    }
}

Somehow the container width sticks past the $fivehundred breakpoint and beyond still to the initial values instead to the $largerviewport ones. Somehow i fear that this is the wrong way to modify the container in my wrapper class? Another error in reasoning on my side? Best regards Ralf

Update 2: Ok that is actually odd. i've tried the following Sass code right now:

.sectionwrap{
    @include container;
    background-color: red;
    @include breakpoint(500px) {
        @include with-grid-settings(24,7em,4em,1em); 
        background-color: green;
    }
}

And the CSS which was returned looks like the following:

.sectionwrap {
  max-width: 31em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  background-color: red; }
      .sectionwrap:after {
         content: "";
         display: table;
         clear: both; }
  @media (min-width: 31.25em) {
    .sectionwrap {
      background-color: green; 
    } 
}

Somehow the whole with-grid-setting was left out?

Update 3: Ok figured things out. Haven't realized that it is necessary to set the container width after you have included the with-grid-settings function. In another example where i just changed the gutter it wasn't necessary. But here it seems it is.

.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($columns: 12, $width: 3em, $gutter: 1em, $padding: 1em){
                @include set-container-width;
        } 
    }
}

Update 4 Ok for others who might run into a similar issue, that might be helpful. I just wondered why my values set in the with-grid-settings function haven't been respected - the padding value in particular. Then i realized that set container width only sets the max-width value. But to apply all entered values to the grid you have to add the container mixin again so maxwidth as well as the paddings get utilised. But now all seems fine and working. ;) Took a while. Cheers r.

Answer 1

Both the % units and the squish mixin are working against you. Susy sets a max-width on containers by default, in the same units you used to define the grid. In fact, that's all those units are used for. If you want your max-width to be in px, define your grid in px. If you want em use em. $container-width is an override for the default, so that should have worked. I would have to see your actual code when you tried that to know what went wrong.

I recommend just this:

$total-columns: 24;
$column-width: 30px; // adjust as needed
$gutter-width: 10px; // adjust as needed
$grid-padding: 0;

.sectionwrap{
  @include container;
}

Anything else is really just overcomplicating things.