Bourbon Neat — неравномерное количество колонок

Я пытаюсь создать макет, похожий на Metro, с разной шириной столбцов (без использования чего-либо, похожего на Masonry), но с одинаковой высотой, например:

--------------------------
| col(2)        | col(1) |
--------------------------
| col(1)| col(1)| col(1) |
--------------------------
| col(1) | col(2)        |
--------------------------

Я пытался использовать различные функции, упомянутые в документации, но у меня не получается. Мой текущий код выглядит следующим образом:

СКСС

// Config
$border-box-sizing: true !default;
$visual-grid: true !default;

// Container
.container {
    @include outer-container;
}

article.post {
    @include span-columns(4);
    height: 300px;
    background: #aaa;
}

article.large {
    @include span-columns(8);
}

HTML

<div class="container">
    <article class="post large">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post large">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post large">text</article>
</div>

Ничего особенного, как видите. Что я могу сделать, чтобы решить эту проблему (кроме возврата к Bootstrap :))?


html twitter-bootstrap bourbon neat
person Tomek Buszewski    schedule 18.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно использовать @include omega();, чтобы получить разрыв строки.

http://thoughtbot.github.io/neat-docs/latest/#omega

Итак, поскольку вы хотите делать перерыв после каждых 12 пролетов, вам нужно добавить туда омегу.

В приведенном вами примере это может выглядеть так.

Добавьте это scss:

article.break {   @include omega(); }

И измените свой html на:

<div class="container">
    <article class="post large">text</article>
    <article class="post break">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post break">text</article>
    <article class="post large">text</article>
    <article class="post break">text</article>
    <article class="post">text</article>
    <article class="post large break">text</article>
</div>
person Sebsemillia    schedule 18.01.2015
comment
Столбцы будут случайными, поэтому вы никогда не знаете, какой из них будет последним в строке. - person Tomek Buszewski; 18.01.2015
comment
Да, я так и думал. Значит, нужно найти другой способ определения последних. Либо на стороне клиента, например. JavaScript или серверная версия, например. PHP.. - person Sebsemillia; 18.01.2015
comment
Или попробуйте другие фреймворки на основе сетки ;-) В любом случае спасибо за ваш вклад - теперь я знаю, что Neat не для меня. - person Tomek Buszewski; 18.01.2015