The masonry component uses rows and columns to create a grid for starting or landing pages.

Aspect Ratios

The masonry is wrapped by a container with the class masonry-container whith a modifier class setting the aspect ratio of the masonry grid. The following aspect ratios are available:


Row and Column Sizing

Masonry columns and rows can be sized in increments of 5%. The total sum in width as well as height must be 100%. You can have one tile that spans with whole width, or four tiles of 25%, but the total must be 100.

Text Sizing

The content of tiles can be the same in many grids, but sometimes you must adjust the text size to make sure that text fits. You can do this by adding a modifier class to the masonry tile container with the class masonry-tile.

There are two modifiers available: masonry-tile-md makes h1 headlines 75% of full size and masonry-tile-sm makes them 50% of full size.