CompassSusy 중첩 격자는 올바른 열 너비/마진

Question

내가 susy와 메인 그리드 설정을 가지고에게주지 않고 다음 footer 요소에 나는 다음과 같이 약간 다른 격자를 생성하는 Susy의 with-grid-settings() 믹스 인을 사용 : 그래서

footer 
    +span-columns(5 omega, 5) 
    +with-grid-settings(5, 174px ,20px ,0) 
    +container 
    @if $dev-mode-footer == true 
     +susy-grid-background 
    height: 240px 

footer 는 5 개의 기본 열 모두에 걸쳐 있어야하고 약간 다른 너비의 새로운 그리드를 포함하고 container 믹스 인을 사용하여 적용해야합니다.

그래서 내부에 footer이 있습니다. 각각 ul이 있습니다. 각 열은 1 열로 설정되지만 왼쪽 여백은 실제로 두 배가됩니다. 그것은 잘못된 그리드 컨텍스트에 정렬처럼 그것은 justs

같다 :

footer 
    .banner 
    +span-columns(5 omega, 5) 
    height: 187 
    border-top: 3px solid $highlight-1 
    border-bottom: 3px solid $highlight-1 
    padding: 10px 0 

    ul 
     +pie-clearfix 

    li 
     +span-columns(1, 5) 
     border-right: 1px dotted $highlight-2 
     padding-left: 35px 

및 결과의 사진 : 여기

는 CSS입니다. 두 그리드 모두 같은 수의 컬럼을 가지고 있다는 사실과 관련이 있습니까?

Answer 1

어떻게 작동하는지, 미안 해요. 그것은 정말로 개념상의 문제입니다. Susy는 그리드를 디자인 할 수 있도록 도와 주지만, 그리드 자체는 은 어디에도 존재하지 않습니다.. container을 적용해도 적절한 최대 너비 이외의 값은 설정되지 않습니다. 컨테이너 안에는 그리드에 대한 지식이 없습니다. with-grid-settings은 마찬가지로 외부에 영향을 줄 수 없습니다. 새 그리드의 항목은 with-grid-settings 믹스 안에 전달되어야합니다.이

첫째, +span-columns(5 omega, 5) 유용 아무것도하지 않습니다

다음은 실제로하고있는 일입니다. 항목을 오른쪽으로 띄우고 100 % 너비를 적용했습니다. 그러나 블록 요소는 기본적으로 전체 컨텍스트로 확장되므로 실제 코드가 변경되지 않습니다. 당신이 원하는 것 중 하나는 수레를 지우는 것이지만, 그 대신에 clearfix을 사용해야합니다.

그런 다음 동일한 요소에서 container은 단순히 새 max-width 및 자동 여백을 설정하고 있습니다. 즉, 사실 모든 용기는 -이 경우에는 필요하지 않습니다. 새 중첩 된 격자에는 새 컨테이너가 필요하지 않습니다. 필요한 것은 with-grid-settings입니다.

다음은 실제로 원하는 내 추측이다 :

footer 
    +clearfix 
    +with-grid-settings(5, 174px ,20px ,0) 
    @if $dev-mode-footer == true 
     +susy-grid-background 
    height: 240px 
    .banner 
     +clearfix 
     height: 187 
     border-top: 3px solid $highlight-1 
     border-bottom: 3px solid $highlight-1 
     padding: 10px 0 

     ul 
     +pie-clearfix 

     li 
     +span-columns(1, 5) 
     border-right: 1px dotted $highlight-2 
     padding-left: 35px 

또한 리튬에 nth-omega(5n)을 사용해야 할 수도 있습니다.