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

我有这个问题的回答以前在这里： 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 mixi修复这个楼梯问题ñ。

然而，与当前的版本，如果我有“欧米茄（3N）”青菜返回“没有混入名为欧米茄”。

如果我转到当前版本的文档，我可以看到没有关于'欧米茄'的信息了。 2.0版本的更新日志表明欧米茄已被删除。

因此，与当前版本的整洁：我如何创建一个三列网格？

来源

2017-06-04 bob

不知道通过这次读书会解决这个问题，但你可能要检查[这里]（HTTPS： //github.com/thoughtbot/neat/issues/502）链接。 – Belder

我所知道的最简单的解决方法是将前三列放在.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 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; 
      } 
     } 
    }

来源

2017-06-17 21:01:25

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

回答

相关问题