网格之间的空间语义UI

Question

这些天我正在学习 Semantic UI Grid。使用起来很酷，但我在网格方面遇到了一些问题。下面我创建了两个不同的网格，但我不明白为什么两个网格之间没有间距，而且我不知道如何添加它们之间的间距（无需我添加一些新的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

彩色网格可以使用命名的颜色变体来添加背景颜色，但仅限于不包含负边距的填充网格。

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