Singularitygs：保持所有屏幕尺寸的移动网格

Question

由于某种原因，我的网格仅显示所有屏幕尺寸的移动（3 列）网格。我正在使用以下值，但不明白我做错了什么。任何建议都将受到欢迎

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

我正在使用下面的宝石

Using sass 3.3.14
Using breakpoint 2.5.0
Using singularitygs 1.2.1

Answer 1

定义网格上下文是不够的。

为了让您的响应式网格正常工作，您必须明确地使用它们，例如。 g.：

@import "breakpoint";
@import "singularitygs";

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

@include add-gutter(0.25);

.foo {

  background-color: deeppink;
  min-height: 10em;

  // Mobile grid
  @include float-span(1);

  // Medium grid
  @include breakpoint(320px) {
    @include float-span(1);
  }

  // Large grid
  @include breakpoint(740px) {
    @include float-span(1);
  }
}

请注意，跨度从较小的断点泄漏到较大的断点，除非被覆盖，否则它们会弄乱您的布局。为了避免这种情况，请同时设置最小宽度和最大宽度的媒体查询。有关详细信息，请参阅断点文档。