Susy Grid 块无法正常流动

Question

我正在使用 susy 创建一个非常基本的博客布局，它的 3 列宽用于大中型屏幕，2 列用于小屏幕（平板电脑），然后 1 列用于移动设备。手机和平板布局正常，但中大屏幕不流畅，第一行和第三行的第一列没有正常浮动，你可以看到here

下面是我的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)
    );

Answer 1

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

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