Basics of Masonry Layout
The Masonry Layout is getting popular day by day and with applications like Pinterest using it, more and more people are getting influenced to use this layout on their products. But who can blame them, the layout looks simple but slick. Having grids of equal sizes is so boring after using Pinterest for a long time.
It is actually very easy to make a masonry like format with HTML and CSS. But there is a problem with it and you might be here for the same reason.
With HTML and CSS
This layout can be created by using the CSS property, ‘column-count’. Here is an example:
If you want to make Masonry Layout for a static webpage, it would be better to hard code all elements, as it will provide consistent output ( But there is no hard and fast rule ).
OK about the problem. If you look carefully, the first row does not have the first three images of the HTML elements. The first image is in the front, whereas the second image goes to the second row, the third image in the third row, and so on. This might affect the flow, especially when the images have to be in a certain order or in gallery-like web pages where you show the latest images on the top or the opposite.
If you are not okay with the orientation of the items in the masonry, then the solution might be …
With JavaScript
If you are making a webpage with many images, chances are that these are mostly requested asynchronously. Here is an example of implementing Masonry Layout with Javascript.
The downside to this code is that it is not responsive and the number of columns remains the same for all device widths. Also, the number of images in each column is the same, which means, if one column contains all long images, then the difference in height of the columns might be large.
If you don’t want to burden yourself with doing the code yourself, you can also use external Libraries for the job. One of the most popular libraries for this layout is …
Masonry is a JavaScript grid layout library that will help you to achieve the layout you want with minimum code. You can integrate masonry to your vanilla javascript with the CDN or use this with package managers like npm and bower and add class names to your grid items.
Masonry Layout Example:
Using these libraries is better than coding yourself as it gives you optimized codes that have been tested numerous times. If you don't think this library is good than some alternative to Masonry JS are:
Hope this helped. Thank you for visiting.