Thumbnail Grid - using Singularity

Question

I've been using Singularity for a while now, and I like it a lot.

One thing left on my list is to create a thumbnail (or any other element) grid, using Singularity. In other words, a set of repeating elements, that flow from left to right, one element in each column of the grid, and then continue on a new row, at column 1 again.

Let's say the grid is 12 columns, at a large screen size (using breakpoint), and 8 columns at a medium screen size, and 6 columns at a small screen size.

Am I correct in thinking that something like this can be done using nth-of-type{}?

Bourbon Neat has the concept of Alpha/Omega (forces the removal of the gutter) and Row helpers.

Here's where I'm at so far...

And here's the scss..

@include layout-at(6, $small) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-of-type(6n) {
      clear: left;
    }
  }
}

@include layout-at(8, $medium) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-of-type(8n) {
      clear: left;
    }
  }
}

I have a main layout for the site (sidebar, main etc.) and then I define a content layout at a given breakpoint.

I have two questions.

1. What do I need to do to get the 8th story-item back up on to the same row.
2. Does the layout-at mixin honor the mobile first configuration setting? For some reason &:nth-of-type(6n) takes priority, over &:nth-of-type(8n) in the second layout-at(8, $medium)

Any thoughts, suggestions or tips greatly appreciated.

UPDATE:

Okay - almost there..

@include layout-at(6, $small) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-child(6n) {
      background-color: #F00;
      @include float-span(1, 'last');
    }
  }
}

@include layout-at(8, $medium) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-child(8n) {
      background-color: #F00;
      @include float-span(1, 'last');
    }
  }
}

This nearly works, the only problem is that all of the &:nth-child(an) selectors are being applied cumulatively, since I believe the nth-child selectors are 'breaking' out of the layout (and breakpoint) and being applied to the parent element without any media query css to constrain them.

FINAL UPDATE

Here's the final scss markup that worked, with new layouts of 2 (not shown), 3 and 4 columns. Each new layout needed to 'clear' or reset the float-span nth-child of the previous layout.

@include layout-at(3, $small) {
  //@include background-grid($color: #833);
  .story-item {
    @include float-span(1);
  }

  .story-item:nth-child(2n) {
    @include float-span(1);
  }

  .story-item:nth-child(3n) {
    @include float-span(1, 'last');
  }
}

@include layout-at(4, $medium) {
  //@include background-grid($color: #833);
  .story-item {
    @include float-span(1);
  }

  .story-item:nth-child(2n) {
    @include float-span(1);
  }

  .story-item:nth-child(3n) {
    @include float-span(1);
  }

  .story-item:nth-child(4n) {
    @include float-span(1, 'last');
  }
}

Answer 1

Have a look at Singularity Quick Spanner. It makes spanning thumbnails grids a breeze.

Demo: http://lolmaus.github.io/singularity-quick-spanner/

Project page: https://github.com/lolmaus/singularity-quick-spanner