如何将嵌套的网格元素拉出1列？

Question

给出以下HTML结构：

<div id="a">
  A
  <div id="b">
    B
  </div>
</div>

......以及以下Singularity SCSS：

$grids: 6;
$gutters: .1;
$gutter-styles: 'split';

div#a {
  @include grid-span(5,2)
}

div#b {
  // @todo: position and width.
}

...我想创建一个这样的布局，其中B从容器A中拉出1列，并且跨越最左边的2列：

  -----------
  |  A      |
-----       |
| B |       |
-----       |
  |         |
  -----------

当然我可以自己做数学，但我觉得应该可以使用Singularity mixins和函数（毕竟，这就是我使用网格框架的原因:-)）但是，我无法得到B的尺寸和位置正确。

我使用哪个Singularity mixins和/或函数来设置div#b的宽度（列跨度）和位置（负边距左）？

Answer 1

这样的事情看起来像你在寻找：http://sassmeister.com/gist/6663743

Answer 2

答案在很大程度上取决于您想要在#A区块内的流量。

保持流程

最简单的做法是将#B块拉到外面，带有负边距。

为此，您不应该使用grid-span() mixin。相反，请使用width和margin CSS属性。可以使用column-span()和gutter-span()辅助函数计算这些属性的值。

这些辅助函数接受代表网格上下文的$grid参数。您应该提供#A块的网格上下文，它比主网格少一列。

$grids: 6
$gutters: .1
$gutter-styles: 'split'

$a-columns-width: 5

#a
  +grid-span($a-columns-width,2)
  overflow: visible

#b
  width: column-span(2, 1, $grid: $a-columns-width)
  margin-left: - column-span(1, 1, $grid: $a-columns-width) - gutter-span($grid: $a-columns-width) 

请查看演示：http://sassbin.com/gist/6676220/

从流程中删除#B

但#B块没有从流程中取出。它仍然占据#A块的整个宽度，所以你不能把任何东西放在#B的右边。

如果您需要在#B右侧放置一些文字和内容，您应该考虑使用其他方法。绝对的定位是我想到的。

解决方案将更加复杂。如果您希望我提出一个，请更详细地解释您的任务。提供图形模板，也许。

您还必须使用一些技巧来防止＃A的内容被#B覆盖。

平面HTML结构使事情变得简单

另外，为什么首先需要嵌套结构（#A内#B）？如果使结构变平，则定位块变得非常简单：

#a
  +grid-span(5,2)

#b
  +grid-span(2,1)
  margin-top: 4em

演示：http://sassbin.com/gist/6676193/

<＃>＃A的内容出现在#B下仍然是一个问题。

PS 如果您对答案不满意，请更详细地解释该任务，并提供所有＃A内容所需页面的图形说明。