Still confused with nested grids

Question

I've finally found some time to test Singularity, and im back to a problem I had before for that I cant find an obvious solution.

My issue is with nested grids. Let's say i have a simple 12 column grid

$grids: add-grid(12 at $break2);

And my layout uses a main content area that extends for 9 of those 12 columns:

@include breakpoint($break2) {
    @include grid-span(9, 3);
    border: 1px solid red;
}

The, inside that content area, I need to create a section which is divided in three columns, that means each article inside will span 3 columns of the parent container (which is 9 of 9 columns).

I've tried this with following code, but cant get it to work.

.highlights{
    overflow: hidden;
    border: 1px solid black;

    article{

        @include float-span(3);

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

My goal was to have a simple declaration, where i could have a generic article declaration for every article, passing a rule for the last article in each row like i've done above.

Maybe my confusion its because im so used to the current grid system im using, can you help with this. What's best and most pratical way to nest grids so they can align with their parent elements?

Answer 1

So the issue you're having is you haven't changed the grid context and are still using your global 12 column grid context at that point. You need to change your grid context to 9 as you're now inside a 9 column grid. The following should fix your problem:

.highlights{
  overflow: hidden;
  border: 1px solid black;

  article{
    @include layout(9) {
      @include float-span(3);

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