Vertical alignment of items in a susy gallery()

Question

How do I vertical-align: middle items in a susy gallery()? The image I have attached shows my items vertical alignment as it currently stands. As you can see from my highlighting they are all currently vertical-align: top.

Thank you in advance.

Oliver

Answer 1

It's not possible using gallery(), because CSS doesn't have any way to vertically-center floats. To get a centered gallery, you should use flexbox, grid, display-table, or inline-block layouts. You can still use Susy to do the math, if it helps. Here it is with flexbox:

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  background: lightgray;
  flex-basis: span(1 of 6);
  margin-right: gutter(of 6);

  &:nth-child(6n) {
    margin-right: 0;
  }
}