Why don't my floats in my Singularity grid fill all the columns?

Question

Here is the SassMeister. It's a four column sub-layout with floated menu items and i'd like them to fill the columns, but instead they cluster in the first three because the margins are too big.

http://sassmeister.com/gist/b45986bb5bcbc464b3aa

Any insights into why this might be happening?

Answer 1

Wow, that's some messy Drupal markup! You should've cleaned it up and post a reduced demo of your problem rather than just copy-pasting all the mess.

The float-span mixin sets a right margin for an item unless you specify the second argument to be either 'last' or the number of the last column.

The reason why this fails is that you have 4 columns and 3 gutters in your grid, but you tell Singularity to produce per row 4 one-column items with a gutter each, and you end up with 4 columns and 4 gutters. The last item won't fit and is wrapped to the next row.

The solution is to apply 'last' to every fourth item:

.menu-block-1  .leaf {
  @include float-span(1);
  &:nth-child(4n+4) {
    @include float-span(1, 'last');
  }
}

Demo: http://sassmeister.com/gist/5723f9c604752802af05