요소의 너비가 다른 경우 오메가?

Question

너비가 다른 경우 Susy은 자동으로 다중 열 레이아웃을 채울 수 있습니까?

나는 무엇 (아래 코드 참조) 원하는 :

+---------+---------+---------+ 
| I  | want |   | 
+---------+---------+---------+ 
| this | filled |   | 
+---------+---------+---------+ 
| automatically! |   | 
+---------+---------+---------+ 

목적 :

+---------+---------+---------+ 
| I  | want | this | 
+---------+---------+---------+ 
| filled | automatically! | 
+---------+-------------------+ 

내가 (아래 코드 참조) 얻을 ? 대답하는 레이아웃의 경우, 작은 화면 두 열 (미디어 쿼리 중단 점)로 전환 할 수 있어야한다 :

+---------+---------+ 
| I  | want | 
+---------+---------+ 
| this | filled | 
+---------+---------+ 
| automatically! | 
+-------------------+ 

이

이 모든 요소가 왼쪽에 떠 있도록함으로써 간단하게 구현할 수있다. 그러나 복잡성을 줄이기 위해 Susy와 같은 것을 사용하고 싶습니다.

HTML :

<div id="container"> 
    <div class="one">I</div> 
    <div class="one">want</div> 
    <div class="one">this</div> 
    <div class="one">filled</div> 
    <div class="two">automatically</div> 
</div> 

SCSS, 오메가없이 작동하지 :

@import 'susy'; 

$total-columns: 3; 
$column-width: 200px; 
$gutter-width: 5px; 
$grid-padding: 10px; 

#container { 
    @include container; 
    @include susy-grid-background; 

    &>div { 
     height: 50px; 
    } 

    &>div.one { 
     @include span-columns(1); 
    } 

    &>div.two { 
     @include span-columns(2); 
     background: yellow; 
    } 
} 

Answer 1

Susy는 다른 미디어 쿼리 중단 점에서 다른 열 수를 확립하기위한 at-breakpoint() 믹스 인이있다. 하지만 아니요, 자동으로 을 입력 할 수 없습니다..