Neat/omega grid issue

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

Омега может быть немного сложной с использованием 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 для этого примера, это не обязательно, если у вас есть контент.

Надеюсь, это поможет