Search code examples
jquerycssruby-on-railsbourbonneat

Multiple column flowing text with Bourbon / Neat

I have a rails app that outputs an variable number of <li>#{content}</li> components into an HTML page.

These elements are not big and do not fill across a whole screen. I'd like the list to wrap around and into multiple columns, ideally based on height.

ie. (the height of the complete <ul> / 2) = height of new multi column setup

So when the first element of the sinks below the bottom the the left hand column it is automatically moved across to the top of the right hand column and the list flows from there.

Is there a clean way of doing this - built in with bourbon/neat or do I need to use jquery/columnizer?

Solution

  • I found this issue thread to be helpful in solving this for myself: thoughtbot/neat/issues/107

    For my personal use, I adapted the idea to be:

      ul {
     @include span-columns(12);
     @include omega();
     &>li {
        @include span-columns(2 of 12);
        @include omega(n);
     }
  }