如何用波旁威士忌做一个三列网格？

Question

我正在尝试创建一个三列网格，并让各列在行中均匀分布。

我的标记很简单：

<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 outer-container ;
  }
 .service {   
    @include span-columns(4) ;
}

然而结果一团糟：

这接近我想要的。但是街区到处都是。它们在水平或垂直方向上分布不均。

这里可能发生了什么？如何获得块均匀分布的简单三列网格？

Answer 1

你需要在这里使用 omega mixin。试试这个：

.row {
    @include outer-container ;
  }
 .service {   
    @include span-columns(4);
    @include omega(3n);
}

这里有更多信息：

http://thoughtbot.github.io/neat-docs/latest/#omega

如何用波旁威士忌做一个三列网格？

How to do a three column grid with bourbon neat?

sass

bourbon