Question

我有一个名为.container的14列网格。我正在尝试将.block内的.container的4个div作为中心，其中每个.block跨越3列。

我想通过向.block添加一个定位规则来完成此操作，而不是为每个.block添加隔离样式。

根据我对Singularitygs的理解，我应该使用output-style float来定位多个div，它们相对于彼此具有相同的类。

理想情况下，我可以使用位置为2的@include grid-span(3, 2, $output-style: 'float');，但位置似乎无效。根据文档，位置是可选的。但这是否意味着它被忽略了？ 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列加上装订线的空间，我们使用

.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。

2 个答案: