用整洁的网格填充空白区域

Question

我正在使用Bourbon Neat sass网格，我们正在尝试开发一个简单的模板，左侧有一个侧边栏，右侧有一个内容div。

<section class="section">
  <div class="section__container">

    <nav class="side-menu">
      <ul class="side-menu__list">
        <li class="side-menu__list-item">
          <a class="side-menu__link side-menu__link--active" href="#">Typography</a>
        </li>
        <li class="side-menu__list-item">
          <a class="side-menu__link" href="#">Color scheme</a>
        </li>
        <li class="side-menu__list-item">
          <a class="side-menu__link" href="#">Icons</a>
        </li>
        <li class="side-menu__list-item">
          <a class="side-menu__link" href="#">Grid</a>
        </li>
      </ul>
    </nav>

    <div class="working-area">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nisi incidunt ad, recusandae, deserunt quos saepe tempora at natus? Ipsa quod harum, sequi ad unde repellendus nisi nostrum repellat totam.</p>
    </div>

  </div>
</section>

我们有这个sass：

.section {
  @include grid-container;
}

.section__container {
  @include grid-column(8);
  @include grid-shift(2);
}

.working-area {
  @include grid-column(9);
  border: 1px solid red;
}

.side-menu {
  @include grid-column(3);
}

然而，模板总是带有margin-left并且它不会填满整个容器。我无法在他们的文档页面上找到这些信息。

如何删除margin-left并将内容填充到div的其余部分？

我附上了我们所拥有的图像。

Answer 1

Neat v2使用@grid-collapse功能，可用于消除容器的边距。仔细阅读文档here。

在您的情况下，它应该像向@ {1}}选择器添加@ grid-collapse一样简单。