Susy compass Susy网格块流动不正常

我正在使用susy创建一个非常基本的博客布局，它的3栏宽用于大中型屏幕，2栏宽用于小屏幕（平板电脑），然后1栏宽用于移动设备。手机和平板电脑的布局很好，但中、大屏幕显示不正常，第一行和第三行的第一列显示不正常

以下是我的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;
    }
  }

}

scss样式表顶部的susy图是：

@import "susy";

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

---

这取决于您如何定义断点。如果它们仅使用

min width

定义，则

sm

媒体查询中描述的所有内容也将适用于

lg

媒体。您不希望您的

：n子
声明在这样的媒体查询之间流血。你有几个选择


我建议通过将
max width
值添加到除最大值以外的所有值来缩小断点的范围。这样，您就可以为特定范围的屏幕定义布局，而不用担心出血
另一个选项是在每个新断点处覆盖以前的第n个子项设置。这可能很难维持，这就是为什么我更喜欢第一种选择
是的，我正在使用最小宽度作为断点，这就是我正在使用的：如果$class==xs{media（最大宽度：767px）{@content；}否则如果$class==sm{media（最小宽度：768px）{@content；}否则如果$class==md{media（最小宽度：992px）{@content；}否则如果$class==lg media（最小宽度：1200px）{@content；}如果我把最小宽度改为最大宽度，则平板电脑看起来不正确，你可以看到我不想改变的基本网格<代码>最小宽度 > <代码>最大宽度，你想在中间使用所有的东西。例如，
如果$class==md{media（最小宽度：992px）和（最大宽度：1199px）{@content；}}
。这给了你的样式一个下限和上限，这样它们就不会溢出到下一个断点。谢谢，添加一个最小和最大宽度修正了我的问题。