Although Susy is a powerful tool, I have noticed a potential weakness with it. For example, imagine having three floated block elements within a container named "blocks":
The "block" element is assigned 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>
When I increase the window size, the content inside the blocks becomes too large for my preference, so I add a max-width to the "blocks" element. However, upon reaching the max-width, I realize that the blocks are now too close together... Adding a max-width to the "block" elements then disrupts the float layout, resulting in uneven spacing between the second and third elements.
I have found that implementing "text-align: justify" on the "blocks" container and using "display: inline-block" for the "block" elements creates a desirable layout. This approach allows the block elements to stop growing at a certain point (when the "blocks" max-width is reached), while the space between them continues to expand (justified content).
This layout method has proven to be effective and valuable. With the positive feedback on inline-block layouts and Susy from various sources, I am curious about the limitations of utilizing Susy for such a layout.