为什么奇点 GS 无法正确显示以下标记？

Question

<div class="grid">
  <header>header</header>
  <div>main</div>
  <footer>footer</footer>
</div>

我为三种屏幕尺寸定义了三个网格。该标记包含三个元素，它们在不同屏幕尺寸的不同列中显示。

移动布局，主div留在第一列，页眉和页脚显示在第二列

平板布局，所有三个元素在第二列重叠(因为margin-right: -100%;)，似乎是一个错误。

桌面布局，唯一有效的布局，页眉/页脚/主显示在第五列

网格定义:

// grid columns
$grids      : 2;
$grids      : add-grid(6 at 40em);
$grids      : add-grid(12 at 50em);
// grid gutters
$gutters    : .2;

style:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.grid {
  @include background-grid;
  margin: 0 auto;
  max-width: 1080px;
  min-height: 100%;
}
.layout {
  // mobile layout
  @include grid-span(1,2);
  // tablet layout
  @include breakpoint(40em){
    @include grid-span(4,2);
  }
  // desktop layout
  @include breakpoint(50em){
    @include grid-span(8,5);
  }
}
header, 
.grid div,
footer { 
  @extend .layout;
}

有人知道为什么会这样吗?

Answer 1

奇点需要知道每列的位置。grid-span中的第二个值是您设置为2和5的位置，强制列从这些位置开始。如果您希望将内容放在第一列中，则可以将该值更改为1。

听起来你也习惯了在页面上浮动列，所以在它之前的一个会影响下一个列的位置。默认情况下，Singularity使用一种称为隔离的技术。您可以通过写入$output: float切换到更传统的float方法。这些输出样式的文档可以在这里找到:https://github.com/Team-Sass/Singularity/wiki/Output-Styles#float