Masonry

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:

masonry-container-1by1
masonry-container-4by3
masonry-container-16by9
masonry-container-3by2
masonry-container-8by5
masonry-container-2by1

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.