Susy网格块流动不正常

Question

我正在使用susy创建一个非常基本的博客布局，其中3列宽用于大中型屏幕，2列用于小型（平板电脑），然后1列用于移动设备。移动设备和平板电脑的布局很好，但中屏幕和大屏幕没有正常流动，第一行和第三行的第一列没有正确浮动，正如你在这里看到的

下面是我的scs:

.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)
    );

Answer 1

这取决于如何定义断点。如果仅使用min-width定义它们，则sm介质查询中描述的所有内容也将适用于lg介质。您不希望:nth-child声明在这样的媒体查询之间流血。你有几个选择。

• 我建议通过将max-width值添加到除最大值之外的所有值来缩小断点的范围。这样，您就可以为特定范围的屏幕定义布局，而不用担心出血
• 另一个选项是在每个新断点覆盖以前的nth-child设置。这可能很难维持，这就是为什么我更喜欢第一种选择