Susy2 Sass: Centering elements vertically inside grid columns?

Question

I'm having a bit of trouble with vertically centering elements inside of grid column.

Typically I'd use table-cell for something like that, but I'm having problems due to the float nature of Susy. Everything I try seems to fall apart at some point.

For instance if I wanted to center these elements vertically in their respective column how would I do that, assuming I am using the default grid settings.

<div class="section">
   <div class="col1">Some Text<br/>Some Text</div>
   <div class="col2"><img src=""/></div>
   <div class="col3">Some Text</div>
</div>

Much thanks for any help

Answer 1

If you want to use table-cell with Susy, you should. Susy was built to be taken apart and customized. You can use the built-in functions in any way you like. I'm no master of table-based layout, but it sounds like you are. As far as Susy is concerned, it would look something like this:

.section {
  display: table;
}

.col1, .col2, .col3 {
  display: table-cell;
  vertical-align: middle;
}

.col1, .col3 {
  width: span(1);
}

.col2 {
  width: span(2);
}

The span function works the same way as the span mixin, but only returns a width value. Combine that with your table-cells, and you should be good to go.

We're talking about adding a table-cell output option that will do this for you. If you have ideas for how that should work, open up a github issue and we'll talk. I'd love to hear your thoughts.