css - Justified blocks in a Susy grid -

susy great tool, feel have come across weakness it. let's have 3 floated block elements in "blocks" container:

the "block" element given "span(4 of 12)"

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

as expand window, content inside blocks gets large liking, add max-width "blocks" element. when max-width reached, i, unfortunately, find blocks close together... add max-width "block" elements... screws floated layout third block floated right (last) , first 2 floated left (causing increased space between 2nd , 3rd elements resize).

i finding best way setting "text-align: justify" on "blocks" container, , "display: inline-block" on "block" elements. method, can create layout block elements stop growing @ point ("blocks" max-width reached), space between them continues increase (justified content).

to me nice , valuable layout. i've read of praise different people both inline-block layouts , susy. wondering whether susy limited in accomplishing such layout.

susy doesn't have shortcuts creating inline-block layouts (because of white-space problems cause) — but real power of susy flexibility want, using supplied functions. can this:

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

the same idea work flexbox, find more powerful inline-block — , gives space-between option, replace need explicit gutters or gutter-overrides.