如何处理重复网格模式奇点gs

Question

我正在建立一个博客主页，其中包含5行和2列的10篇博文。每列占据50％的宽度并向左浮动。如果我使用bootstrap的网格，我会在每篇博客文章中使用.col-md-6。

如何使用singularitygs

实现这一目标

@include add-grid(1 1); // Defines a grid of 2 columns
article {
  @include grid-span(1,1);
}

我告诉它将文章放在第一列。如何创建一个独立于我跨越它的位置的网格类？

我只是像下面那样做自己的CSS吗？

article {
  width: 50%;
  float: left;
}

我想为所有博客帖子使用单个类来实现此行为。

Answer 1

Bootstrap使用Singularity称为Float output style的内容。使用Singularity 1.2+，您可以使用@include sgs-change('output', 'float');更改输出方法。除了grid-span之外，Singularity附带的输出样式还提供了特定于输出的span mixin，因为每种输出样式都有一个稍微不同的心智模型，这些模型可以满足这些需求。 float-span是Flout输出样式的跨度，它非常适合在对称网格上相互对接的多个项目，就像你拥有的一样。

Bootstrap目前有固定的排水沟，而不是流体排水沟，因此您需要将Singularity的排水沟设置为0或固定宽度排水沟的固定数量（通过在内部添加padding完成）。如果添加填充，请务必将项目的框模型更改为border-box。

你将要拥有的一个区别是，你需要考虑的任何一种方式，就是每行中的第一项需要清除所有浮动的方向（在这种情况下，{{1这可以使用clear: left完成，但请记住，类型是标记，而不是类，并且可能无法准确生成您正在查找的结果（应该用于大约90％的用例）。如果你不这样做，那么不同大小的内容就有可能造成尴尬的行。

有关所有这些内容的演示，请参阅此SassMeister示例。