整齊/歐米茄網格問題

Question

我對Neat很新，目前正在研究一個顯示圖像庫的簡單網格。

我的代碼

$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聲明堅持和破壞你的佈局。

，所以它看起來像這樣我會調整你的代碼：

$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); 
    } 
} 

我在這裏做一個快速的筆，所以你可以看到它在行動：

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

高度僅僅是對於這個示例，添加到article，如果您有內容，則不需要。

希望這會有幫助