Question

我正在使用Singularity Grid System版本1.1.2，我的12列网格变量是$ grid：12，$ gutters：1/3。网格布局工作正常。现在我想给出顶部Headergroup，中间部分和覆盖整个浏览器宽度的页脚背景颜色。所有内容都居中，占总宽度的90％。

Answer 1

创造全彩色出血是一个不幸的丑陋任务，但它很容易做到。您将要执行以下操作：

<div class="full-stripe header">
  <header class="container"></header>
</div>
<div class="full-stripe main">
  <main class="container"></main>
</div>
<div class="full-stripe footer">
  <footer class="container"></footer>
</div>

您需要做的是将网站的每个部分包装在一个div中，该div将拉伸整个页面的宽度，同时保持其中包含的内容片段共享一个类似的类。然后你的CSS看起来像下面这样：

.full-stripe {
  width: 100%;
  @include clearfix;
  &.header {
    background: red;
  }
  &.main {
    background: green;
  }
  &.footer {
    background: blue;
  }
}
.container {
  margin: 0 auto;
  padding: 0;
  max-width: 68.5em;
  @include clearfix;
}

我已经创建了一个CodePen来证明这一点。该容器具有一些额外的造型，使其脱颖而出并帮助可视化正在发生的事情：

Code
Full

Answer 2

您可能会发现nested context mixin中的toolkit有用。它找到百分比容器的上下文，因此hgroup上的@include nested-context(90%, center)将使其成为全宽。

页眉和页脚宽度为100％的奇点网格布局

2 个答案: