グリッド間のスペースセマンティックUI

Question

最近セマンティックUIグリッドを学んでいます。使用するのはかなりクールですが、グリッドに問題があります。私は2つの異なるグリッドを作成しましたが、なぜ2つのグリッド間にスペースがないのか分かりませんし、それらの間にスペースを追加する方法がわかりません。グリッドに追加するクラスがありますか？

<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

私は '埋め' グリッドと色を使用してトラブルがあると思います。 SUIオプションは見つかりませんでしたが、ネストされたグリッドは一時的な解決策です。

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

カラーグリッドはなく、唯一のマイナスマージンを含まないパッド入りのグリッドと、背景色を追加するには名前付きの色のバリエーションを使用することができます。

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