여전히 중첩 된 격자와 혼동 됨

Question

Singularity를 ​​테스트 할 시간을 마침내 찾았습니다. 이전에 가지고 있던 문제에 대해 명확한 해결책을 찾지 못했습니다.

내 문제는 중첩 된 격자입니다.

@include breakpoint($break2) { 
    @include grid-span(9, 3); 
    border: 1px solid red; 
} 

(가), 콘텐츠 영역 안에, 내가 필요 : 의 내가 간단한 12 기둥 그리드

$grids: add-grid(12 at $break2); 

이 그리고 내 레이아웃이 그 (12) 열 아홉에 대한 확장하는 영역에 주요 내용을 사용한다고 가정 해 봅시다 세 개의 열로 나뉘는 섹션을 만들면 내부의 각 아티클이 상위 컨테이너의 3 개의 열 (9 개의 열 중 9 개)에 걸쳐 있음을 의미합니다.

다음 코드를 사용해 보았지만 제대로 작동하지 않습니다. 내 목표

.highlights{ 
    overflow: hidden; 
    border: 1px solid black; 

    article{ 

     @include float-span(3); 

     &:nth-child(3n){ 
      @include float-span(1, 'last'); 
     } 
    } 
} 

내가 위에서했던 것처럼 각 행의 마지막 기사에 대한 규칙을 통과, 난 각 기사에 대한 일반적인 문서 선언을 할 수있는 간단한 선언을 가지고 있었다.

어쩌면 내 혼란 그 때문에 인스턴트 메신저 사용하여 현재 그리드 시스템에 사용, 당신이 도와 줄 수 있습니다. 그리드를 중첩하여 부모 요소와 정렬 할 수있는 최선의 방법은 무엇입니까?

Answer 1

그래서 문제는 그리드 컨텍스트를 변경하지 않았고 그 시점에서 여전히 글로벌 12 열 그리드 컨텍스트를 사용하고 있다는 것입니다. 9 열 그리드 안에있는 것처럼 그리드 컨텍스트를 9로 변경해야합니다. 다음은 문제를 해결해야합니다.

.highlights{ 
    overflow: hidden; 
    border: 1px solid black; 

    article{ 
    @include layout(9) { 
     @include float-span(3); 

     &:nth-child(3n){ 
     @include float-span(1, 'last'); 
     } 
    } 
    } 
}