css - 网格语义 UI 之间的空间

Question

我最近在学习语义 UI 网格。使用起来很酷，但我在使用网格时遇到了一些问题。下面我创建了两个不同的网格，但我不明白为什么两个网格之间没有间距，我不知道如何添加它们之间的间距(没有我添加一些新的 css)。是否有一个类可以添加到网格中以获得我想要的间距？

    <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

Colored Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.

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