Question

我之前已回答过这个问题： 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来解决。

但是，对于当前版本，如果我包含＆＃39; omega（3n）＆＃39; sass返回＆＃34;没有mixin名为omega＆＃34;。

如果我查看当前版本的文档，我可以看到没有关于＆＃39; omega＆＃39;了。 2.0的更改日志表明已删除omega。

所以，使用当前版本的neat：如何创建三列网格？

Answer 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上放一个清楚的左边。

标记（只有一个＆＃34;行＆＃34;）：

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

如何创建一个整齐的三列网格？

1 个答案: