用整洁的网格填充空白空间答案

【问题标题】：Fill blank space with Neat grid用整洁的网格填充空白空间
【发布时间】：2017-06-09 10:05:24
【问题描述】：

我正在使用 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 的其余部分？

我附上一张我们所拥有的图片。

【问题讨论】：

我很确定 Neat v2 使用了grid-collapse，它可用于更改容器的边距。我对 Neat 的使用经验并不丰富，只使用了少量，但我会查看文档并检查 grid-collapse 的工作原理。这可能就像将@grid-collapse 添加到您的.working-area 选择器一样简单。
你是对的。我可以通过使用 grid-collapse 来修复它

标签： html css bourbon neat

【解决方案1】：

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

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

【讨论】：