How do I create a three-column grid with neat?

Question

I've had this question answered previously here: How to do a three column grid with bourbon neat? However, since I updated bourbon and neat on my system, that method no longer works.

Again, my markup looks like this:

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

And my scss looks like this:

.row {
    @include grid-container;
        .col {
            @include grid-column(4) ;
        }
    }

And the result looks like this:

https://i.stack.imgur.com/9lZHx.png

In previous versions this staircase issue could be fixed by using the omega mixin.

However, with the current version, if I include 'omega(3n)' sass returns "no mixin named omega".

If I go to the docs for the current version I can see that there is no information on 'omega' anymore. The changelog for 2.0 states that omega has been removed.

So, with the current version of neat: how can I create a three-column grid?

Not sure if reading through this will solve the problem but you might want to check [this](https://github.com/thoughtbot/neat/issues/502) link. — Belder, Jun 08 '17 at 16:53

Brian R · Answer 1 · 2017-06-18T22:34:46.357

The simplest solution I know is to put the first three columns in a .row div and the last three columns in their own .row div. That way you have two grid-containers, which creates a clear-fix.

Markup:

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>
<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

SCSS (unchanged):

.row {
    @include grid-container;
        .col {
            @include grid-column(4) ;
        }
    }

Or, you could put a clear left on every 4th .col div.

Markup (only one "row"):

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

SCSS:

.row {
    @include grid-container;
        .col {
            @include grid-column(4);
               &:nth-of-type(3n+1) {
                  clear: left;
            }
        }
    }

How do I create a three-column grid with neat?

1 Answers1