The general masonry layout looks like:
<div id="wrap wrap--masonry">
<div class="wrap wrap--content"> item </div>
</div>
A more accurate structure will be:
<section class="wrap wrap--frame wrap--masonry">
<wrap wrap--content wrap--content__middle"> item 1 </div>
<wrap wrap--content wrap--content__middle"> item 2 </div>
...and more...
</section>
This will looks like:
And if you use wrap--content__third
you get:
<section class="wrap wrap--frame wrap--masonry">
<wrap wrap--content wrap--content__third"> item </div>
...and more...
</section>
...and wrap--content__fourth
...
<section class="wrap wrap--frame wrap--masonry">
<wrap wrap--content wrap--content__fourth"> item </div>
...and more...
</section>
...even wrap--content__fifth
...
<section class="wrap wrap--frame wrap--masonry">
<wrap wrap--content wrap--content__fifth"> item </div>
...and more...
</section>
...even wrap--content__100
...
<section class="wrap wrap--frame wrap--masonry">
<wrap wrap--content wrap--content__100"> item </div>
...and more...
</section>
...aaand even wrap--content__45
. Why 45px? Because is a good minimal size for buttons in mobile sizes.
<section class="wrap wrap--frame wrap--masonry">
<wrap wrap--content wrap--content__45"> item </div>
...and more...
</section>
You hate these prepotent selfmade containers who grow until they can, dont you?
Don't worry bro. Append wrap--masonry__nogrow
in the parent wrap:
<section class="wrap wrap--frame wrap--masonry wrap--masonry__nogrow">
<wrap wrap--content wrap--content__fifth"> item </div>
...and more...
</section>