dynamic height rows with SUSY layout

Question

How can we get columns in SUSY to equal the rows height in a fluid manner?

The rows height is in this case dictated by the content with the most height.

Couldn't find the answer anywhere and it will be definitely helpful for most SUSY users. So thanks for any contributions!

SUSY SETTINGS:

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

score 0 · Answer 1 · answered Aug 30 '15 at 10:31

CSS Doesn't have any cross-browser way to do equal-height columns — and Susy can't do anything beyond CSS. There are any number of work-arounds, but the best is flexbox (if the browser support is good enough for your site). To use Susy with flexbox, do something like this:

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

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

You might be able to use display: table; and display: table-cell to do something similar. In either case, you want to drop the Susy span mixin, and use the span function instead. It uses the same syntax.

Thanks, I'll try it out. For now I'm using a % of viewport width to keep the rows in equal height. This works, except it messes up ratio when zooming in on Safari browsers. — Driesketeer, Aug 31 '15 at 12:41

dynamic height rows with SUSY layout

1 Answers1