Css 如何在SASS版本的基础上设置带槽的列？ 我很难让栏目与ASS版本的基金会合作。

我试图在一行中创建4列

父项设置为一行。这四个孩子被赋予以下规则：

@include grid-column(3)

我的期望是，这将创建四列，因为

12/4=3

但是，最后一列不在该行中，并且留下了一个间隙。 这里发生了什么

以下是我所拥有的：

我的sass来源：

生成的html/css：

编辑： 如果我链接到JSFIDLE而不在此处粘贴代码，stackoverflow将生成一个错误。这是我的html：

 <section id="main-content"

        <section id="looptest">

          <h2>foundation/sass columns</h2>

          <div id="blocks">

            <div class="block">
              <p>block one</p>
            </div>
            <div class="block">
              <p>block two</p>
            </div>
            <div class="block">
              <p>block three</p>
            </div>
            <div class="block">
              <p>block four</p>
            </div>

          </div><!-- ENDS #blocks -->

     </section><!-- ENDS #looptest -->

  </section>  <!-- main-content ends -->

您应该将
#块
设置为
@仅包括网格行
。相反，您将其设置为也包含网格（12）

。看起来您也在嵌套

.block

类。这也可能造成问题

考虑一下它与表现类的关系。这一点尤其重要，因为表示类实际上是由非常相同的sass和sass混合生成的

例如，使用表示类，它应该是这样的

<div class="row" id="blocks">
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
</div>

最简单的sass是：

#blocks
  @include grid-row
.block 
  @include grid-column(4)

---

可能是Hey Leon的复制品。不。我的问题与那个问题无关。而且这些解决方案也不适用。这与我所做的非常接近。这是一个很好的关于如何使用网格混合的指导。但是，您的代码的问题与我的代码相同：仍然没有排水沟。即使我按照您的建议删除“@include grid（12）”，情况也是如此。由于檐槽是通过填充而不是通过这些div上的边距定义的，因此您需要在“column/.block”中嵌套另一个div，然后设置该div的背景色，以获得带有檐槽的网格效果。否则，它看起来是对齐齐平的。只有当您的列与它们下面的背景色不同时，才需要执行此操作。i、 e.在

.row>.large-4.columns*3>.panel>

中，或采用与sass类似的格式

#blocks>.block*3>.block content>

<div id="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

#blocks
  @include grid-row
.block 
  @include grid-column(4)