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 值来缩小断点的范围。这样您就可以为特定范围的屏幕定义布局，而不必担心出血。
另一种选择是在每个新断点覆盖之前的 nth-child 设置。这可能很难维护，这就是为什么我更喜欢第一个选项。

Susy Grid 块无法正常流动

Susy Grid block not flowing properly

susy-compass

susy-sass

susy