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块不能正常流动

1 个答案: