How can I create a “gallery” with singularitygs?

Question

I'm trying to create a small gallery in the footer of my site. At the moment, the following Sass does actually work but it doesn't seem very efficient to use the one, two and three classes on each footer_block but I simply can't see another way of doing this.

Essentially I have a symmetrical grid nested inside an asymmetrical grid and would like to repeat the same grid-span call for each of the three footer_block items but have failed to figure out how.

The Sass looks like:

.region--footer {
  color: $color__background--dark;
  border: {
    top: 1px solid $base-ui-color;
  }
  font-family: $secondary-font-family;
  font-size: $font-size-sm;
  .content {
    padding: {
      bottom: em(32px, $font-size-sm);
      top: em(32px, $font-size-sm);
    }
    @extend .cf;
    @include add-grid(4 10 3);
    @include add-gutter(1/4);
    @include add-gutter-style('split');
  }
}

.footer__blocks {
  @extend .cf;
  @include grid-span(1, 2);
  @include layout(3, $gutter: 0) {
    .footer__block {
      @include grid-span(1, 1);
    }
    .footer__block.two {
      @include grid-span(1, 2);
    }
    .footer__block.three {
      @include grid-span(1, 3);
    }
  }
}

The HTML looks like:

<footer class="region--footer">
  <div class="content">
    <div class="footer__blocks">
      <div class="footer__block one">
        <img src="image.jpg">
    </div>
      <div class="footer__block two">
        <img src="image.jpg">
      </div>
      <div class="footer__block three">
      <img src="image.jpg">
      </div>
    </div>
  </div>
</footer>

Thanks in advance

Answer 1

Float span

Here's a solution:

.footer__blocks {
  @include grid-span(1, 2);

  $cols: 3;

  @include layout($cols, $gutter: 0) {
    .footer__block {
      @include float-span(1);
      &:nth-child(#{$cols}n+#{$cols}) {
        @include float-span(1, 'last');
      }
    }
  }
}

Demo: http://sassmeister.com/gist/5dab07e1ab0b861e4b4a

1. We use float-span(1) to span items in a symmetrical grid. It allows us to use the same definition for all items, rather than applying a unique position for every item.
2. The last item in each row should have no right gutter. The &:nth-child(3n+3) selector targets every third item in all rows. We apply a float-span(1, 'last'), telling Singularity not to add right margin.

Singularity Quick Spanner

You can also make use of my singularity-quick-spanner extension to simplify things even further. It lets you achieve the same result as above with a single line of code:

.footer__blocks {
  @include grid-span(1, 2);

  @include layout(3, $gutter: 0) {
    .footer__block {
      @include thumb-span(3); // Magic! :D
    }
  }
}

Demo: http://sassmeister.com/gist/c2c4ab643165c9da2526