Grid-layout-center-last overwrites breakpoints

[studiobovenkamer]

How can we reproduce this bug?

1. Create a grid with 3 or more columns. In my case @include grid-column(6).
2. For mobile first / below medium: @include grid-layout-center-last(2);
3. For medium breakpoint: create specific rule @include grid-layout-center-last(3).

What did you expect to happen?
That for medium breakpint an up the rules would not be overwritten by the less specific rule created in step 2.

What happened instead?
The @include grid-layout-center-last(2); that I've created (in step 2) for mobile/small overwrites the medium rule @include grid-layout-center-last(3);

Test case:
This doesn't work

  .team-list {
    @include grid-row();

    .team-member {
      @include grid-column(6);
      @include grid-column-end;
      @include grid-layout-center-last(2);

      @include breakpoint(medium) {
        @include grid-column(4);
        @include grid-column-end;
        @include grid-layout-center-last(3);
      }
  }
}

But this works

  .team-list {
    @include grid-row();

    .team-member {
      @include grid-column(6);
      @include grid-column-end;

//need specific small only or medium and up will be overwritten
      @include breakpoint(small only) {
        @include grid-layout-center-last(2);
      }

      @include breakpoint(medium) {
        @include grid-column(4);
        @include grid-column-end;
        @include grid-layout-center-last(3);
      }
  }
}

[kball]

Hmm... @brettsmason @andycochran @JeremyEnglert any of you have an idea what's going on here?

[brettsmason]

@studiobovenkamer I'd like to look at this for you and get it sorted out.
However I'm slightly confused with what you are trying to achieve.

Could you perhaps explain what you wanted to happen on each break point and what actually is happening? Your HTML markup (or an idea of it) would be useful too.

[brettsmason]

@studiobovenkamer Actually I've managed to recreate this, I needed 5 .team-member elements for it to show.
the nth-child set with the small breakpoint is still present on the medium breakpoint. I'm not sure what the best solution is for this, I'll have a think.

[studiobovenkamer]

@brettsmason let me know is you need any additional info on this. I should have included the HTML.

[andycochran]

Can't you just use grid-col-size() in the medium breakpoint instead of grid-column() again, as it's already a column? You just need to change its size.

If I'm understanding the grid-layout-center-last function correctly, it only centers the last column in the row if it's on a row by itself. So if two .team-members are on one row, they won't be centered.

Hmm… 

[brettsmason]

As this is related to the old legacy float grid and is a bit of an edge case I'm going to go ahead and close this.