Masonry structure

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:

item 1

item 2

item 3

item 4

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>

item

...and wrap--content__fourth...


    <section class="wrap wrap--frame wrap--masonry">
        <wrap wrap--content wrap--content__fourth"> item </div>
        ...and more...
    </section>

item

If I fit, I sit (wrap--content__middle)

item

...even wrap--content__fifth...


    <section class="wrap wrap--frame wrap--masonry">
        <wrap wrap--content wrap--content__fifth"> item </div>
        ...and more...
    </section>

item

Frames will not die!

item

...even wrap--content__100...


    <section class="wrap wrap--frame wrap--masonry">
        <wrap wrap--content wrap--content__100"> item </div>
        ...and more...
    </section>

item

...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>

Items with fixed width

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>

item