Files

• _masonry-grid.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/utilities/masonry-grid

Module Overview

Credit to this module goes out to George Denning for this CodePen: http://codepen.io/georgehdenning/pen/dYNWeB (modified for use with Kayzen).

Example

<div class="tiles">  
    <div class="tile tile-box">
        <div class="tile tile-rec">
            <div class="tile-img"></div>
        </div>
        <div class="tile tile-rec">
            <div class="tile tile-box">
                <div class="tile tile-rec">
                    <div class="tile-img"></div>
                </div>
                <div class="tile tile-rec">
                    <div class="tile tile-box">
                        <div class="tile-img"></div>
                    </div>
                    <div class="tile tile-box">
                        <div class="tile-img"></div>
                    </div>
                </div>
            </div>
            <div class="tile tile-box">
                <div class="tile-img"></div>
            </div>
        </div>
    </div>
    <div class="tile tile-box">
        <div class="tile-img"></div>
    </div>
</div>

Customizing

The Masonry Grid can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

@include masonry-grid((
    'spacing'    : 8px,
    'background' : pink
));