Question

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

我为三个屏幕尺寸定义了三个网格。标记包含三个元素，这些元素将显示在每个屏幕大小的不同列中。

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

平板电脑布局，所有三个元素在第二列中重叠（因为边距右：-100％;），似乎是一个错误。

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

网格定义：

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

// grid gutters
$gutters    : .2;

风格：

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使用一种名为isolation的技术。您可以通过编写$output: float切换到更传统的浮点方法。有关这些输出样式的文档，请访问：https://github.com/Team-Sass/Singularity/wiki/Output-Styles#float

为什么奇点GS不能正确显示以下标记？

1 个答案: