динамические строки высоты с SUSY-макетом

Question

Как мы можем получить столбцы в SUSY для равномерного роста строк в жидкой форме?

Высота строк в этом случае определяется контентом с наибольшей высотой.

Не удалось найти ответ нигде, и это будет определенно полезно для большинства пользователей SUSY. Так что спасибо за любые вклады!

сУсИ НАСТРОЙКИ:

@import "susy"; 

$susy: (
    columns: 12, 
    gutters: 1/6, 
    math: fluid, 
    output: float, 
); 

CSS:

main-container { 
    @include container (80%); 
} 

.block { 
    background: #e1e1e1; 
} 

.row { 
    display: inline-block; 
} 

.photo { 
    height:100%; 
} 

#block1-1 { 
    @include span(4); 
} 

#block1-2 { 
    display: table; 
    @include span(8 at 5); 
} 

#block2-1 { 
    @include span(4); 
} 

#block2-2 { 
    @include span(4 at 5); 
} 

#bloc2-3 { 
    @include span(4 at 9); 
} 

HTML:

<div class="main-container"> 

    <div class="row"> 
     <div id="block1-1" class="block">content</div> 
     <div id="block1-2" class="photo">content</div> 
    </div> 

    <div class="row"> 
     <div id="block2-1" class="photo">content</div> 
     <div id="block2-2" class="block">content</div> 
     <div id="block2-3" class="block">content</div> 
    </div> 
</div> 

Answer 1

CSS Не имеет никакого кроссбраузерный способ сделать столбцы одинаковой высоты - и Сьюзи не может ничего сделать за пределами CSS. Есть any number of work-arounds, но лучше всего flexbox (при полной поддержке браузера для вашего сайта). Чтобы использовать Сюзи с Flexbox, сделать что-то вроде этого:

.row { 
    align-items: stretch; 
    display: flex; 
} 

#block1-1 { 
    width: span(4); 
} 

Вы можете быть в состоянии использовать display: table; и display: table-cell, чтобы сделать что-то подобное. В любом случае вы хотите сбросить Mixy Susy span и вместо этого использовать функцию span. Он использует тот же синтаксис.