Нажимать/вытягивать элементы из их контейнеров с сеткой

Question

Можно ли вытащить элементы из своих контейнеров, сохранив их в соответствии с основной сеткой?

На изображении ниже, у меня есть представление о том, чего я пытаюсь достичь. Допустим, что весь мой текст, включая более мелкие детали в первом столбце, находится в контейнере, который охватывает столбцы 2 и 3. Затем я хочу, чтобы меньший текст извлекал из этого контейнера один столбец влево, эффективно перемещаясь в столбец 1, сохраняя при этом совпадение с главной копией.

Красные ящики - основная сетка, синий - внутренние элементы контейнера.

Возможно ли это с особенностью?

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