The masonry component uses rows and columns to create a grid for starting or landing pages.
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
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.
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
There are two modifiers available:
h1 headlines 75% of full size and
masonry-tile-sm makes them 50% of full size.