Bourbon Neat - uneven column count

Question

I am trying to build a Metro-like layout, with various column widths (without using anything like Masonry), but same heights, like this:

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

I tried to make use of various functions mentioned in the docs, but I can't get it right. My current code is as follows:

SCSS

// 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>

Nothing fancy, as you see. What can I do to work this out (other than going back to Bootstrap:))?

score 0 · Accepted Answer · answered Jan 18 '15 at 14:08

0

You need to use @include omega(); to get the line break.

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

So since you want to have a break after each 12 span-cloumns, you need to add the omega there.

In your given example it could look like this.

Add this scss:

article.break {   @include omega(); }

And change your html to:

<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>

answered Jan 18 '15 at 14:08

Sebsemillia

9,366
2
55
70

Columns will be quite random, so you never know which one will be the last in the row. – Tomek Buszewski Jan 18 '15 at 16:14
Yes, I thought so. So you need to find another way to determine the last ones. Either client-side via e.g. JavaScript or server-side vie e.g. PHP.. – Sebsemillia Jan 18 '15 at 16:21
Or try other grid-based frameworks ;-) Thanks for your input anyways - now I know that Neat isn't for me. – Tomek Buszewski Jan 18 '15 at 16:25

Bourbon Neat - uneven column count

1 Answers1