중단 점이있는 중첩 된 격자

Question

두 개의 중첩 된 격자에 대해 susy를 사용하려고합니다. 하나는 페이지 레이아웃 (왼쪽에는 메뉴, 오른쪽에는 내용)을 정의하고 다른 하나는 content 내부에 정의합니다.

그 이유는 다른 템플릿을 사용할 수있는 CMS에서 콘텐츠를 만들고 그 템플릿과 함께 scss 코드를 갖고 싶기 때문입니다. 유체 그리드를 사용하면 정확히 그 문제를 해결하는 것 같습니다 :

<div class="page"> 
    <div class="menu"> 
     <ul><li>foo</li><li>bar</li></ul> 
    </div> 
    <div class="content"> 
     <div class="item">1</div> 
     <div class="item">2</div> 
     <div class="item">3</div> 
     <div class="item">4</div> 
    </div> 
</div> 

@import "susy"; 

/* Outer Grid (Page Layout) */ 
$total-columns : 4; 
$column-width : 1024px/$total-columns; 
$gutter-width : 0px; 
$grid-padding : 0px; 
.page { 
    @include container; 
    .menu { 
     @include span-columns(1); 
    } 
    .content { 
     @include span-columns(3); 
    } 
} 

/* Inner Grid */ 
$total-columns : 1; 
$column-width : 200px; 
$gutter-width : 0px; 
$grid-padding : 0px; 
$container-style: fluid; 
.page .content { 
    @include container; 
    .item { 
     @include span-columns(1); 
    } 
    @include at-breakpoint(3) { 
     @include container; 
     .item { 
      @include span-columns(1); 
     } 
    } 
} 

내 문제는 $ column-width : 200px입니다. 생성 된 미디어 쿼리가 min-widht : 600px를 사용하기 때문에 내부 그리드의 경우에는 75 %의 너비 만 사용 가능합니다.

이것을 구현하는 가장 좋은 방법은 무엇입니까?

Answer 1

container 믹스 인은 중첩 된 컨텍스트에서 유용하지 않습니다. 최대 너비와 자동 여백을 설정합니다. (페이지 센터링의 경우) 이미 둘 다 외부 컨테이너에 의해 처리됩니다.

또한 1 열 그리드에 대해서도 권장합니다. 가장 작은 유용한 그리드 (3)로 시작하고 모바일 브레이크 포인트를 벗어날 때까지 열을 사용하지 마십시오.

Susy 2.0에서는 더 명확 해 지지만 비율을 생성하기 위해 주로 열 및 거터 폭이 사용됩니다. 따라서 컨테이너 너비를 기반으로 설정하려는 경우 사용하는 단위가별로 중요하지 않습니다. 즉 혼란 소리, 그러나 여기에서 당신이 원하는 것을 달성 할 방법은 수 그 설정에 따라

$total-columns : 4; 
$column-width : 200px; 
$gutter-width : 0px; 
$grid-padding : 0px; 
$container-width: 1024px; 

는 Susy 가능한 1024px 컨테이너 폭에서 균일하게 배분 배수구없이 4 열을 만듭니다. $container-width을 설정했기 때문에 Susy는 비율을 결정하기 위해 과 $gutter-width을 사용합니다. 그 비율의 한쪽이 0이기 때문에 다른 쪽이 무엇인지 상관하지 않습니다. 이러한 값의 다른 용도는 중단 점 계산입니다. 우리는 조금 후에 그것을 보게 될 것입니다. 뿐만 아니라 내부 그리드 잘 외부 그리드 작업

.page .content { 
    .item { 
    // Elements span the full width by default, so nothing is needed in mobile view. 
    @include at-breakpoint($total-columns) { 
     @include span-columns(1,3); 
     @include nth-omega(3n); 
    } 
    } 
} 

설정 :

.page { 
    @include container; 
    .menu { 
    @include span-columns(1); 
    } 
    .content { 
    @include span-columns(3 omega); 
    } 
} 

과 : 지금 당신은 당신의 일을 할 수있다. 그것들은 실제로 다른 그리드가 아니며 다른 요소 안에 중첩 된 요소입니다.