Masonry Playground

How this works

Create an element with a class of "perrin-masonry", then put elements inside of it, each with a class of "tile"

Rows are 1120px wide, each tile has a margin of 5px on every side. This means that each tile subtracts 10 horizontal pixels.

The widest tile you can have is 1110px

you can declare the dimensions of each element by applying class names to an element. <div class="tile width-270"></div>. It doesn't have to be a 'div'. You are restricted to a set of pre-determined widths; 1110, 970, 830, 690, 550, 410, 270, 130.

Examples of width combinations

Examples of height combinations

The default height for each element is 130 so you don't have to declare that height.

Otherwise you can declare a height with a classname such as "height-270", "height-410", "height-550", or "height-690". The order in which you place these elements matters

All classes for the masonry elements

.tile (this class is required for each element)
.rounded (this will add rounded corners to the element)
.backgroud-gray-dark
.backgroud-gray-light
.backgroud-red
.backgroud-black
.width-130
.width-270
.width-410
.width-550
.width-690
.width-830
.width-970
.width-1110 (full width)
.height-130 (you don't actually have to declare height 130, this is the default height)
.height-270
.height-410
.height-550
.height-690