整齐/欧米茄网格问题

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，如果您有内容，则不需要。

希望这会有帮助