Platz zwischen Grids Semantic UI

Question

Ich lerne Semantic UI Grid in diesen Tagen. Es ist ziemlich cool zu verwenden, aber ich habe einige Probleme mit den Rastern. Unten habe ich zwei verschiedene Grids erstellt, aber ich verstehe nicht, warum es keinen Abstand zwischen den beiden Grids gibt und ich kann nicht herausfinden, wie man den Abstand zwischen ihnen addiert (ohne dass ich ein neues CSS hinzufüge). Gibt es eine Klasse, die den Gittern hinzugefügt werden muss, um den gewünschten Abstand zu erhalten?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<div class="ui container"> 
 
    <div class="ui equal width padded grid"> 
 
     <div class="ui row"> 
 
      <div class="ui black column"></div> 
 
      <div class="ui red column"></div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="ui padded grid"> 
 
     <div class="ui blue row"> 
 
      <div class="ui column">Single Row</div> 
 
     </div> 
 
     <div class="ui yellow equal width row"> 
 
      <div class="ui green column">1</div> 
 
      <div class="ui column">2</div> 
 
      <div class="ui red column">3</div> 
 
     </div> 
 
     <div class="ui three column row"> 
 
      <div class="ui pink left floated column">LEFT</div> 
 
      <div class="ui pink right floated column">RIGHT</div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Ich denke, es gibt Probleme mit 'aufgefüllt' Raster mit Farbe. Ich konnte keine SUI-Option finden, aber möglicherweise ist das verschachtelte Grid eine temporäre Lösung.

http://semantic-ui.com/collections/grid.html#/overview

Farbige Grids genannt Farben Variationen verwenden können Hintergrundfarben hinzufügen, aber nur mit gepolsterten Raster, das sind keine negativen Margen.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<div class="ui container"> 
 
    <div class="ui equal width padded grid"> 
 
     <div class="ui row"> 
 
      <div class="ui black column"></div> 
 
      <div class="ui red column"></div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="ui grid"> 
 
     <div class="ui row"> 
 
      <div class="ui column"> 
 
       <div class="ui padded grid"> 
 
         <div class="ui blue row"> 
 
          <div class="ui column">Single Row</div> 
 
         </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="ui equal width row"> 
 
      <div class="ui column"> 
 
       <div class="ui padded grid"> 
 
         <div class="ui green row"> 
 
          <div class="ui column">1</div> 
 
         </div> 
 
       </div> 
 
      </div> 
 
      <div class="ui column"> 
 
       <div class="ui padded grid"> 
 
         <div class="ui yellow row"> 
 
          <div class="ui column">2</div> 
 
         </div> 
 
       </div> 
 
      </div> 
 
      <div class="ui column"> 
 
       <div class="ui padded grid"> 
 
         <div class="ui red row"> 
 
          <div class="ui column">3</div> 
 
         </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="ui three column row"> 
 
      <div class="ui left floated column"> 
 
       <div class="ui padded grid"> 
 
         <div class="ui pink row"> 
 
          <div class="ui column">LEFT</div> 
 
         </div> 
 
       </div> 
 
      </div> 
 
      <div class="ui right floated column"> 
 
       <div class="ui padded grid"> 
 
         <div class="ui pink row"> 
 
          <div class="ui column">LEFT</div> 
 
         </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>