Singularitygs

Question

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

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

根据我对 Singularitygs 的理解，我应该使用输出样式的浮点数来定位具有相同 class 的多个 div 相对于彼此。

理想情况下，我可以在 location 为 2 的地方使用 @include grid-span(3, 2, $output-style: 'float');，但 location 似乎无效。根据文档，位置是可选的。但这是否意味着它被忽略了？ 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 公开的网格跨度函数检索该值。具体来说，它 returns "a percentage equal to the column-span at a given span and location plus a gutter-span"。 https://github.com/at-import/Singularity/wiki/Grid-Helpers

在上面的例子中，由于我们想要在 4 个 .block 的每一侧加上 1 列加上装订线的价值 space，所以我们使用

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

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

Answer 2

我将块 div 包裹在另一个 div 中并将其居中，然后块可以很好地堆叠在其中。

http://sassmeister.com/gist/503b1301a0969c9395ad

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

Singularitygs - center divs using grid-span location and output-style 'float'

css