Bourbon Neat - How to do automatic columns?

Question

I'm building a website with Bourbon Neat and I need to arrange columns like this:

Any ideas on how to write the code?

I've tried

.column {
  @include span-columns(1);
  @include omega(2n)
}

but all columns have the same height. And I need different heights.

Thank you in advance.

Answer 1

To get this:

Your html needs to look about like this:

<div class = 'content'>
  <div class = 'short-column' id ='red'>
  </div>

  <div class = 'tall-column' id ='yellow'>
  </div>
</div>

<div class = 'content'>
  <div class = 'tall-column' id ='green' >
  </div>

  <div class = 'short-column' id ='blue'>
  </div>
</div>

And then your scss needs to look like this:

.content {
  @include outer-container;
  height: 20em;
  display: inline-block;
  width: 90px;
}

.tall-column {
  @include span-columns(1);
  height: 80%;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.short-column {
  @include span-columns(1);
  height: 20%;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

Making the outer content div display inline-block will stack the columns on top of each other the way you want them to. Set a specific height (20em in this case) for the content div, then set the heights of the short column div and the tall column div to sum to 100% (80% + 20% = 100% of 20 em in this example).