Search code examples
htmlcssbourbonneat

Fill blank space with Neat grid

I am using Bourbon Neat sass grid and we are trying to develop a simple template that has a sidebar on left and a content div on the right.

<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>

We have this 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);
}

However the template always come with a margin-left and it doesn't fill the whole container. I couldn't find this information on their Docs page.

How to remove that margin-left and make the content fill the rest of the div?

I attach an image of what we have. enter image description here

Solution

  • Neat v2 uses the @grid-collapse feature which can be used to eliminate the margins of your container. Read through the docs here.

    In your case, it should be as simple as adding @grid-collapse to your .working-area selector.