깔끔한/오메가 그리드 문제

Question

나는 아주 청초하고 현재 이미지 갤러리를 보여주는 간단한 격자 작업을하고 있습니다.

내 코드 바탕 화면에 지금

$mobile: new-breakpoint(max-width 500px); 
$tablet: new-breakpoint(max-width 768px); 

article{ 
    background-color: #efefef; 
    margin-bottom: 2em; 

    @include span-columns(3); 
    @include omega(4n); 

    @include media($tablet){ 
    background-color: orange; 
    @include span-columns(4); 
    @include omega(3n); 
    } 

    @include media($mobile){ 
    background-color: yellow; 
    @include span-columns(6); 
    @include omega(2n); 
    } 
} 

전체 방송은해야하지만, 같은 나는 태블릿 또는 모바일, 레이아웃 휴식을 위해 크기를 조정하고 내 레이아웃에 큰 격차를 얻을 때 .. 나는 그것이 실종 된 바보 같은 작은 일이라는 것을 알고 있지만 그것을 볼 수 없다. ((누군가가 나를 도울 수 있기를 바랍니다.)

Answer 1

오메가는 깔끔하게 약간 까다로울 수 있습니다. 상호 배타적 인 미디어를 사용하는 것이 좋습니다. 문제를 해결하기위한 쿼리 여기에 대한 자세한 내용 :

이

https://github.com/thoughtbot/neat#how-do-i-use-omega-in-a-mobile-first-workflow

이 지속하고 레이아웃을 깨는 omega 선언을 중지합니다.

은 다음과 같습니다 그래서 나는 코드를 조정합니다 :

http://codepen.io/mikehdesign/pen/qajxrW

은 높이가 단지입니다 : 내가 여기에 빠른 펜을했을

$mobile: new-breakpoint(max-width 500px); 
$tablet: new-breakpoint(min-width 501px max-width 768px); 
$desktop: new-breakpoint(min-width 769px); 

article{ 
    margin-bottom: 2em; 
    @include media($mobile){ 
    background-color: yellow; 
    @include span-columns(6); 
    @include omega(2n); 
    } 

    @include media($tablet){ 
    background-color: orange; 
    @include span-columns(4); 
    @include omega(3n); 
    } 

    @include media($desktop){ 
    background-color: #efefef; 
    @include span-columns(3); 
    @include omega(4n); 
    } 
} 

당신이 행동을 볼 수 있도록 이 예의 경우 article에 추가되었으므로 내용이있는 경우에는 필요하지 않습니다.

희망이 있습니다.