Hinzufügen von Padding zu einem einfachen Susy-Layout

Question

Hinzufügen von Padding zu einem einfachen susy Layout scheint das Raster für mich zu brechen. Das Hinzufügen der Auffüllung zu .item Klasse bricht das ansonsten funktionierende 12-Spalten-Raster.

$susy: (
    columns: 12, 
    gutters: 1/4, 
    gutter-position: split 
); 
$grid-padding:1em; 
.wrap { 
    border: 1px solid red; 

    .item{ 
    background: lightGrey; 
    padding-bottom: 10px; 
    padding: 10px; //<= THIS BREAKS THE GRID 
    } 
} 

    .wrap { 
    border: 1px solid red; 
    @include container(900px); 

    } 

    .item { 
    &.main{ 
     @include span(8 first); 
    } 
    &.side { 
     @include span(4 last); 
    } 
    } 
    .main:after { 
    content: ''; 
    display: block; 
    clear:both; 
    } 

Meister

The documentation Art macht es den Anschein, als ob Polsterung als drittes Argument an die span mixin angegeben werden kann, sondern dass die Arbeit für mich auch nicht.

Answer 1

Diese so einfach ist weltweit als die box-sizing Eigenschaft mit Susys in mixin gebaut Einstellung:

@include global-box-sizing(border-box): 

Oder setzen Sie es optional auf nur einer span mixin

@include span(6 of 12 border-box) 

Relevant Susy docs

super relevantes Susy-Zitat:

Es wird dringend empfohlen, eine globale Rahmeneinstellung zu verwenden, insbesondere wenn Sie Innenrinnen jeglicher Art verwenden.