Susy Grid block not flowing properly

Question

I'm using susy to create a very basic blog layout, its 3 columns wide for large medium screens, 2 columns for small (tablet) and then 1 column for mobile. The mobile and tablet layout works fine but medium and large screens are not flowing properly, the first column in the first row and third row are not floating properly as you can see here

Below is my scss:

.col-post {
    margin-bottom: gutter();
    background: #f5f5f5;

    @include breakpoint(xs) {
        @include span(12 of 12);
    }

    @include breakpoint(sm) {
        @include span(6 of 12 first);
        &:nth-child(2n) {
        @include last;
    }
    }

    @include breakpoint(md) {
        @include span(4 of 12 first);
        &:nth-child(3n) {
        @include last;
    }
}

    @include breakpoint(lg) {
        @include span(4 of 12 first);
        &:nth-child(3n) {
        @include last;
    }
  }

}

and my susy map at the top of my scss stylesheet is:

@import "susy";

    $susy: (
      columns: 12,
      container: 1200px,
      gutters: 1/4,
      grid-padding: 1em,
      global-box-sizing: border-box,
      debug: (image: show)
    );

Answer 1

This depends on how you defined your breakpoints. If they are defined using min-width only, then everything described in your sm media-query, will also apply to your lg media. You don't want your :nth-child declarations to bleed between media-queries like that. You have a few options.

• I recommend narrowing the scope of your breakpoints by adding a max-width value to all but the largest. That way you can define layouts for a specific range of screens without worrying about bleed.
• The other option is to override your previous nth-child settings at each new breakpoint. That can be difficult to maintain, which is why I prefer the first option.