Justified blocks in a Susy grid

Question

Susy is a great tool, but I feel I have come across a weakness with it. Let's say that I have three floated block elements in a "blocks" container:

The "block" element will be given a "span(4 of 12)"

<div class="blocks">
    <div class="block">
        //img and text
    </div>
    <div class="block">
        //img and text
    </div>
    <div class="block">
        //img and text
    </div>
</div>

As I expand the window, the content inside the blocks gets too large for my liking, so I add a max-width to the "blocks" element. When the max-width is reached, I, unfortunately, find the blocks to be too close together... So I add a max-width to my "block" elements... but this screws up this floated layout as the third block will be floated right (last) and the first two will be floated left (causing increased space between the 2nd and 3rd elements with resize).

I am finding the best way to do this is by setting "text-align: justify" on my "blocks" container, and "display: inline-block" on my "block" elements. With this method, I can create a layout where my block elements stop growing at a certain point ("blocks" max-width reached), but then the space between them continues to increase (justified content).

To me this is a really nice and valuable layout. I've read of much praise by different people about both inline-block layouts and Susy. I was wondering whether Susy is limited in accomplishing such a layout.

Answer 1

Susy doesn't have shortcuts for creating inline-block layouts (because of the white-space problems they cause) — but the real power of Susy is the flexibility to do anything you want, using the supplied functions. You can do something like this:

.block {
  display: inline-block;
  margin: gutter(of 12);
  max-width: 14em; // whatever you need
  width: span(4 of 12);
}

The same idea would work with flexbox, which I find much more powerful than inline-block — and it gives you the space-between option, which would replace any need for explicit gutters or gutter-overrides.