从网格容器中推/拉元素

时间:2013-10-12 15:51:27

标签: css singularitygs

是否可以从容器中拉出元素,同时保持它们与主网格对齐?

在下面的图片中,我展示了我想要实现的目标。让我说我的所有文本,包括第一列中较小的细节,都在一个跨越第2列和第3列的容器上。然后,我希望较小的文本从该容器中拉出一列到左边,有效地移动到第1列,同时与主要副本保持一致。

红色框是主网格,蓝色是内部容器元素。

Singularity可以实现吗?

Push/Pull grid elements

2 个答案:

答案 0 :(得分:3)

奇点般完全可以实现这一点!

要将元素从容器中拉出,只需使用负边距。但适当的宽度和边距大小需要一些棘手的数学:

<div id=container>
  <div id=a>a</div>
  <div id=b>b</div>
  <div id=c>c</div>
</div>
$grids: 1 2 2
$gutters: .25


#container
  +grid-span(2,2)

#b
  $coefficient: (1 + 2 + 2) / (2 + 2)
  $width: column-span(1, 1) * $coefficient
  $gutter: gutter-span() * $coefficient

  width: $width
  margin-left: 0 - $width - $gutter

  float: left
  clear: both

+layout(2 2)
  #a, #c
    +grid-span(2, 1)

结果:

enter image description here

演示:http://sassbin.com/gist/6953993/

请注意,拉出的列的宽度和位置与网格完全匹配。这可能是由于浏览器中的舍入错误,或者我的数学可能是错误的。

答案 1 :(得分:1)

不是目前的形式,虽然目前您可能会觉得这很有用:https://github.com/Team-Sass/toolkit#nested-context