単純なSusyレイアウトにパディングを追加する

Question

単純なサニーレイアウトにパディングを追加すると、グリッドが壊れているようです。 .itemにパディングを追加すると、それ以外は機能する12列グリッドが壊れます。

$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種類のパディングがspanミックスインの3番目の引数として指定することができますが、それはどちらか私のために働いていないかのように、それは思われてしまいます。

Answer 1

これは世界的にミックスインに建てられたスージーさんとbox-sizingプロパティ設定するのと同じくらい簡単です：

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

あるいは、任意で一つだけspanミックスイン

@include span(6 of 12 border-box) 

Relevant Susy docs

スーパーでそれを設定します関連性の高いスージーの見積もり：

グローバルな枠線の設定を使用することを強くお勧めします。特に、内側の溝を使用する場合は特に注意してください。