Susy gallery breaks height for display table and table-cell

Question

I'm trying to get equal height columns on my responsive grid using the gallery mixin for SUSY. To do that, I set the container "display: table" and the column "display: table-cell". This works for me if I do not use the mixin, but fails as soon as I turn on the mixin. The mixin works if I have set the height in pixels, but not if I set the height using 100%;

I'm using:

• susy (2.1.3) and
• sass (~> 3.3)

This works with or without SUSY:

   .ttable {
      @include container;
      padding: gutter();
     @include clearfix;
        .ttd {
            @include gallery(3 of 12);
        }
    }
    .ttable {
        display: table;
        height: 500px;
        border: 1px solid #BF0D3E;;
    }
    .ttd {
        display: table-cell;
        background-color: #eee;
        height: 500px;
    }

This doesn't work with SUSY, but works with the mixin turned off:

.ttable {
    display: table;
    height: 100%;
    border: 1px solid $fuschia;
}
.ttd {
    display: table-cell;
    background-color: #eee;
    height: 100%;
}

Answer 1

The gallery mixin uses floats and margins to position elements, which won't work with table display. The first one works because the table styles are ignored, and the items are floated with a set height. If you want to use table styles to get equal-heights, you should leave out the gallery mixin, and use individual mixins/functions to set width/gutters instead (I think only inside and inside-static gutters will work with table display).

.ttd {
    @include gutters;
    display: table-cell;
    background-color: #eee;
    width: span(3 of 12);
}