css - Singularitygs - 使用网格跨度位置和输出样式居中 div 'float'

Question

我有一个名为 .container 的 14 列网格。我试图将 4 个具有类 .block 的 div 置于 .container 中，其中每个 .block 跨越 3 列。

我想通过向 .block 添加一个定位规则而不是向每个 .block 添加隔离样式来实现这一点。

根据我对 Singularitygs 的理解，我应该使用输出风格的 float 来定位多个具有相同类的相对于彼此的 div。

理想情况下，我可以使用 @include grid-span(3, 2, $output-style: 'float'); 其中位置为 2，但位置似乎无效。根据文档，位置是可选的。但这是否意味着它被忽略了？ https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#float-span

如果位置对 grid-span(3, 2, $output-style: 'float'); 无效，有没有人知道一个简单而优雅的替代解决方案？我想避免在 DOM 中生成额外的元素或定位每个单独的 .block 元素。

我在这里创建了一个关于 sassmeister 的要点: http://sassmeister.com/gist/5e92b58e8bb2a206a228

这里是我使用的代码摘要:

HTML

<div class='container'>
  <div class='block'> </div>
  <div class='block'> </div>
  <div class='block'> </div>
  <div class='block'> </div>
</div>

CSS

@include add-grid(14);

.container {
  height: 100px;
  width: 100%;
}

.block {
  @include grid-span(3, 2, $output-style: 'float');
  height: 25px;
}

提前感谢您的想法!

Answer 1

一个解决方案是添加一个网格跨度百分比(列 + 间距)作为第一个 .block 的左边距。

可以通过 Singularity API 公开的 grid-span 函数检索此值。具体来说，它返回“等于给定跨度和位置处的列跨度加上间距跨度的百分比”。 https://github.com/at-import/Singularity/wiki/Grid-Helpers

在上面的例子中，因为我们想要在 4 个 .block 的每一侧有 1 列加上 gutter 的空间，我们使用

.block:first-of-type {
  margin-left: grid-span(1, 1);
}

这是一个更新的要点，显示了使用这种方法居中的 div:http://sassmeister.com/gist/27e13cc4ae586f2f885f