css - グリッド コンテナからの要素のプッシュ/プル

Question

メイン グリッドに合わせたまま、コンテナーから要素をプルすることは可能ですか?

下の画像では、私が達成しようとしていることを表しています。最初の列の小さな詳細を含むすべてのテキストが、列 2 と 3 にまたがるコンテナー上にあるとします。次に、小さなテキストをそのコンテナーから 1 列左にプルし、効果的に列 1 に移動します。リードコピーとの位置合わせを維持しながら。

赤いボックスはメイン グリッドで、青いボックスは内側のコンテナー要素です。

これは Singularity で可能ですか?

Answer 1

これは Singularity で完全に可能です。

コンテナーから要素を引き出すには、負のマージンを使用します。しかし、適切な幅と余白のサイズには、いくつかのトリッキーな計算が必要です。

<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)

結果：

デモ: http://sassbin.com/gist/6953993/

プルされた列の幅と位置は、グリッドと完全には一致しないことに注意してください。これは、ブラウザーの丸め誤差が原因であるか、計算が間違っている可能性があります。

Answer 2

現在の形ではありませんが、今のところこれが役立つかもしれません: https://github.com/Team-Sass/toolkit#nested-context