ニート/オメガグリッドの問題

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

オメガはちょっとトリッキーなNeatです。私は相互排他的なメディアあなたの問題を解決するための質問ここではそれらについての詳細をお読みください。

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に追加されていますが、コンテンツがある場合は必要ありません。

希望します。