Come impostare un contenitore a larghezza massima di Susy che solo l'imbottitura/margine continua a crescere su finestre più grandi?

Question

Nella mia più grande vista desktop/punto di interruzione ho cercato di ottenere lo stesso comportamento come nella pagina demo di Susy (http://susy.oddbird.net/demos/magic/) - che quando si raggiunge la larghezza massima del contenitore solo il riempimento o il margine su ciascun lato cresce mentre il contenitore stesso rimane in la sua larghezza massima.

ma sono ancora un po 'confuso su alcuni punti, come l'unità preferibile e che cosa è la funzione migliore per ottenere il comportamento di riempimento/margine descritto.

mie impostazioni Susy generali al momento sono i seguenti:

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

La parte specifica SCSS assomiglia a quello. Ho incluso un contenitore e fiancheggiato con un margine via squish:

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

ma il problema è che il contenitore e le aree schiacciata sia crescono e si sviluppano e crescono in proporzione. Probabilmente un difetto è che le unità usate sono percentuali? Sarebbe più ragionevole usare em o rem invece?

Significa che quando viene sommato e viene raggiunta la larghezza massima (numero di colonne * (larghezza della colonna + ampiezza della grondaia)), solo automaticamente le aree occupate continuano a crescere in teoria? Ma ho provato e ha fallito.

Ho anche cercato di impostare:

$container-width: 1000px; 

Ma anche senza fortuna. Ogni suggerimento è apprezzato. Cordiali saluti Ralf

Aggiornamento: ho riordinato il mio sito al primo cellulare e ho pensato che ho ottenuto l'intero concetto di griglia Susy, che era un po 'ingannare dall'incidente squish() in un primo momento. : S Ma in qualche modo credo che faccio qualcosa di sbagliato di nuovo.

// 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); 
    } 
} 

In qualche modo i bastoni larghezza contenitore oltre il $ cinquecento punto di interruzione e oltre ancora ai valori iniziali invece ai $ quelli largerviewport. In qualche modo ho paura che questo è il modo sbagliato per modificare il contenitore nella mia classe wrapper? Un altro errore nel ragionamento da parte mia? Cordiali saluti Ralf

Aggiornamento 2: Ok che è in realtà dispari. Ho provato il seguente codice Sass in questo momento:

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

E il CSS, che è stato restituito è simile alla seguente:

.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; 
    } 
} 

In qualche modo il tutto con-grid-setting è stato lasciato fuori?

Aggiornamento 3: Ok capito le cose. Non hanno capito che è necessario impostare la larghezza contenitore dopo aver incluso la funzione con-grid-settings. In un altro esempio in cui ho appena cambiato la grondaia non è stato necessario. Ma qui sembra che lo sia.

.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 per altri che potrebbero incorrere in un problema simile, che potrebbe essere utile. Mi sono semplicemente chiesto perché i miei valori impostati nella funzione con-grid-settings non sono stati rispettati, in particolare il valore di padding. Poi ho capito che la larghezza del contenitore impostato imposta solo il valore della larghezza massima. Ma per applicare tutti i valori immessi alla griglia è necessario aggiungere nuovamente il mixin del contenitore in modo da sfruttare al massimo la larghezza e le imbottiture. Ma ora tutto sembra a posto e funzionante. ;) Ci sono voluti un po '. Saluti r.

Answer 1

Entrambe le unità % e il mixaggio squish funzionano contro di voi. Susy imposta una larghezza massima sui contenitori per impostazione predefinita, nelle stesse unità utilizzate per definire la griglia. In realtà, sono tutte quelle unità utilizzate per. Se vuoi che la tua larghezza massima sia px, definisci la tua griglia in px. Se si desidera em utilizzare em. $container-width è un override predefinito, quindi avrebbe dovuto funzionare. Dovrei vedere il tuo codice reale quando lo hai provato per sapere cosa è andato storto.

vi consiglio proprio questo:

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

.sectionwrap{ 
    @include container; 
} 

Tutto il resto è in realtà solo overcomplicating cose.