doptrois / SASSMasonryMixin

Creates a masonry layout with only CSS and one line of code. Fallback to display: inline-block and text-align: justify provided for browsers that don't support css columns. Percentage gaps supported, even though they are not supported by default by css columns. The mixin will simulate that behaviour for you.

CSS Only SASS Masonry Mixin

Demo on codepen.io

http://codepen.io/doptrois/pen/JoyzKw

Supports gap indication in

• Pixels
• Rems
• Percentages*

*Percent gaps are not supported by css columns e.g.

columns-gap: 3%

The mixin will simulate that behaviour for you.

Some mixins used from bourbon.io

How To

your-masonry-container {
    @include masonry(3, 2%, "> *");
}

Each variable is optional. Defaults are shown above.

Note

If you use percentages for columns gaps, it's recommended to not style the direct child elements of 'your-masonry-container' and wrap the content inside with an additional element and style these elements like in the codepen example.