간단한 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 믹스 인 세 번째 인수로 지정할 수 있습니다 것처럼 보일 수 있지만, 그 중 나를 위해 작동하지 않습니다

. 전 세계적으로 Susy의 믹스 인 내장과 box-sizing 속성을 설정으로

Answer 1

이것은 간단하다 :

는

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

또는 선택적으로 하나의 span 믹스 인

@include span(6 of 12 border-box) 

Relevant Susy docs

슈퍼 그것을 설정 관련 Susy 견적 :

특히 모든 종류의 내부 거터를 사용하는 경우 전역 테두리 상자 설정을 사용하는 것이 좋습니다.