Singularitygs - 使用网格跨度位置和输出样式“浮动”的中心 div答案

【问题标题】：Singularitygs - center divs using grid-span location and output-style 'float'Singularitygs - 使用网格跨度位置和输出样式“浮动”的中心 div
【发布时间】：2015-03-23 18:01:58
【问题描述】：

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

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

根据我对 Singularitygs 的理解，我应该使用输出样式的浮点数来定位具有相同类的多个 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;
}

提前感谢您的想法！

【问题讨论】：

标签： css singularitygs

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：