如何创建一个整洁的三列网格？答案

【问题标题】：How do I create a three-column grid with neat?如何创建一个整洁的三列网格？
【发布时间】：2017-06-04 08:57:49
【问题描述】：

我以前在这里回答过这个问题： How to do a three column grid with bourbon neat? 但是，由于我在我的系统上更新了波旁威士忌和整洁，该方法不再有效。

同样，我的标记看起来像这样：

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

我的 scss 看起来像这样：

.row {
    @include grid-container;
        .col {
            @include grid-column(4) ;
        }
    }

结果如下所示：

https://i.stack.imgur.com/9lZHx.png

在以前的版本中，这个楼梯问题可以通过使用 omega mixin 来解决。

但是，在当前版本中，如果我包含 'omega(3n)' sass 会返回“no mixin named omega”。

如果我查看当前版本的文档，我可以看到不再有关于“omega”的信息。 2.0 的更新日志指出 omega 已被删除。

那么，使用当前版本的整洁：如何创建三列网格？

【问题讨论】：

不确定通读是否能解决问题，但您可能需要查看this 链接。

标签： bourbon neat

【解决方案1】：

我知道的最简单的解决方案是将前三列放在 .row div 中，最后三列放在它们自己的 .row div 中。这样你就有了两个网格容器，这会创建一个清晰的修复。

标记：

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>
<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

SCSS（不变）：

.row {
    @include grid-container;
        .col {
            @include grid-column(4) ;
        }
    }

或者，您可以在每 4 个 .col div 上放置一个清晰的左侧。

标记（只有一个“行”）：

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

SCSS：

.row {
    @include grid-container;
        .col {
            @include grid-column(4);
               &:nth-of-type(3n+1) {
                  clear: left;
            }
        }
    }

【讨论】：