Переупорядочение макета столбцов Susy

Question

У меня есть следующий контент, который я бы связал со стилем и переупорядочивал с Susy.

Заказ источника является следующим и не может быть изменен.

<div class="item a">A</div> 
<div class="item b">B</div> 
<div class="item c">C</div> 
<div class="item d">D</div> 

Требуемая компоновка:

------------------------------- 
    | A |  B  | C | 
    |-------|    |  | 
    | D |    |  | 
    ------------------------------ 

или:

------------------------------- 
    | A |  B  | C | 
    |-------|    |  | 
    | D |    |  | 
    |  |    --------- 
    |  |    | 
    ---------    | 
      |    | 
      --------------- 

или:

------------------------------- 
    | A |  B  | C | 
    |  |    |  | 
    |  |-------------|  | 
    |  |    --------- 
    --------- 
    | D | 
    --------- 

и так далее.

В основном колонка D должна следовать за потоком колонны A. Как я могу это сделать с Сьюзи?

Я придумал следующее prototype, которое работает только с текстом в столбцах.

$susy: (
    columns: 4, 
); 

.item { 
    background: lightgray; 
    outline: 1px solid; 
} 

.a { 
    @include span(1); 
} 

.b { 
    @include span(2 at 1 isolate); /* Why do I place this at 1 and not at 2? */ 
} 

.c { 
    @include span(last 1); 
} 

.d { 
    width: span(1); 
} 

Этот подход ломается, когда я хочу использовать div с с clear: both внутри колонны D, как в следующем случае.

<div class="item a">A</div> 
<div class="item b">B</div> 
<div class="item c">C</div> 
<div class="item d"> 
    <div style="clear: both">Title</div> 
    Other text 
</div> 

В этом случае столбец D правильно расположен на левой стороне макета, но ниже A, B и C.

Answer 1

@include span(2 at 1 isolate); 

Это означает поместить b, после того, как width of 1 span с width of 2 span. Пролет ширина рассчитывается в соответствии с columns параметром при $susy (total_width/4 в вашем случае)

Если а, в, г имеет ширину 1 единицу и б имеет 2, то это совершенно правильно.

Answer 2

Следующее решение, которое я мог найти. Я в основном использовал обертку вокруг B и C, чтобы подтолкнуть их обоих вправо.

<div class="item a">A</div> 
<div class="wrapper"> 
    <div class="item b">B</div> 
    <div class="item c">C</div> 
</div> 
<div class="item d"> 
    <div style="clear: both">Title</div> 
    Other text 
</div> 

Это выравнивание двух столбцов с правой стороны.

$susy: (
    columns: 4, 
); 

.item { 
    background: lightgray; 
    outline: 1px solid; 
} 

.wrapper { 
    @include span(last 3); 
} 

.a { 
    @include span(1); 
} 

.b { 
    @include span(2 of 3); 
} 

.c { 
    @include span(last 1 of 3); 
} 

.d { 
    @include span(1); 
    clear: left; 
}