Css Singularitygs-使用栅格跨度位置和输出样式的中心div'；浮动'；

我有一个14列的网格，名为

.container

。我试图将类

.block

位于

.container

中的4个div居中，其中每个

.block

跨越3列

我想通过向

.block

添加一个定位规则来实现这一点，而不是向每个

.block

添加一个隔离样式

基于我对Singularitygs的理解，我应该使用输出样式float来定位具有相同类的多个div，使它们彼此相对

理想情况下，我可以使用

@include grid span（3,2，$output样式：“float”）其中位置为2，但位置似乎无效。根据文档，位置是可选的。但这是否意味着它被忽视了

如果位置对
网格跨度（3,2，$output style:'float'）无效
，有人知道简单而优雅的替代解决方案吗？我希望避免在DOM中生成额外的元素或定位每个
.block
元素

我在这里创建了一个关于sassmeister的要点：

下面是我使用的代码的摘要：

HTML

提前感谢您的想法
 一种解决方案是在第一个
.block
中添加一个网格跨度百分比（列+边沟）作为左边距

该值可通过奇异性API公开的网格跨度函数检索。具体来说，它返回“等于给定跨距和位置处的柱跨距加上檐槽跨距的百分比”

在上面的例子中，由于我们希望在4个
块的每一侧都有1列加上槽的空间，所以我们使用

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

下面是使用这种方法显示居中div的更新要点：
我将块div包装在另一个div中并居中，然后块可以很好地堆叠在其中


@include add-grid(14);

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

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

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