Singularity GS에서 다음 마크 업을 올바르게 표시 할 수없는 이유는 무엇입니까?

Question

<div class="grid"> 
    <header>header</header> 
    <div>main</div> 
    <footer>footer</footer> 
</div> 

3 개의 스크린 크기에 대해 3 개의 격자를 정의했습니다. 마크 업은 각 화면 크기에 대해 다른 열에 표시되는 세 가지 요소를 포함합니다.

이 모바일 레이아웃는 주요 사업부가 첫 번째 열에 유지

는 머리글과 바닥 글이 2 열에 표시 얻을

태블릿 레이아웃, 세 가지 요소 (마진 오른쪽 때문에 2 열에서 중복 얻을 : -100 %;), 버그 인 것 같습니다.

바탕 화면 레이아웃, 머리글/바닥 글/주요 다섯 번째 열에 표시 얻을에서만 작동하는 레이아웃

그리드의 정의 :

// grid columns 
$grids  : 2; 
$grids  : add-grid(6 at 40em); 
$grids  : add-grid(12 at 50em); 

// grid gutters 
$gutters : .2; 

작풍 :

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

.grid { 
    @include background-grid; 
    margin: 0 auto; 
    max-width: 1080px; 
    min-height: 100%; 
} 

.layout { 
    // mobile layout 
    @include grid-span(1,2); 
    // tablet layout 
    @include breakpoint(40em){ 
    @include grid-span(4,2); 
    } 
    // desktop layout 
    @include breakpoint(50em){ 
    @include grid-span(8,5); 
    } 
} 

header, 
.grid div, 
footer { 
    @extend .layout; 
} 

왜 이런 일이 일어나는 지 아는 사람이 있습니까?

Answer 1

특이점은 각 열의 위치를 ​​알아야합니다. grid-span의 두 번째 값은 2 및 5에 해당 위치에서 열을 강제로 설정 한 위치입니다. 항목을 첫 번째 열에 배치하려면 해당 값을 1으로 변경할 수 있습니다.

페이지 전체에 걸쳐 열을 떠있는 것처럼 보이기 때문에 이전의 열이 다음 열의 위치에 영향을주는 것처럼 보입니다. 기본적으로 Singularity는 isolation이라는 기술을 사용합니다. $output: float을 쓰면보다 전통적인 플로트 방법으로 전환 할 수 있습니다. 이 출력 스타일에 대한 문서는 다음에서 찾을 수 있습니다. https://github.com/Team-Sass/Singularity/wiki/Output-Styles#float