ニートグリッドで空白を埋める

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を削除して、コンテンツを残りの部分に埋め込むにはどうすればよいですか？

私たちが持っているもののイメージを添付します。

Answer 1

ニートv2では、コンテナの余白をなくすために使用できる@grid-collapse機能が使用されています。ドキュメントhereを読んでください。

あなたの場合、.working-areaセレクタに@ grid-collapseを追加するだけで簡単です。