Leere Stelle mit sauberem Gitter füllen

Question

Ich verwende Bourbon Neat sass grid und wir versuchen, eine einfache Vorlage zu entwickeln, die eine Seitenleiste auf der linken Seite und ein Inhalts-div auf der rechten Seite hat.

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

Wir haben diese 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); 
} 

jedoch die Vorlage immer mit einem margin-left kommen und es nicht den gesamten Behälter füllen. Ich konnte diese Informationen nicht auf ihrer Google Docs-Seite finden.

Wie zu entfernen, dass margin-left und den Inhalt füllen den Rest des div?

Ich füge ein Bild von dem, was wir haben.

Answer 1

Der ordentliche v2 verwendet die @grid-collapse Funktion, die verwendet werden kann, um die Ränder Ihres Containers zu beseitigen. Lesen Sie die Dokumentation here.

In Ihrem Fall sollte es so einfach sein wie das Hinzufügen von @ grid-collapse zu Ihrem .working-area Selektor.