用 Neat grid 填空 space

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。

在你的情况下，它应该像添加 @grid-collapse 到你的 .working-area 选择器一样简单。

用 Neat grid 填空 space

Fill blank space with Neat grid

html

css

neat

bourbon