Search code examples
htmlcssfancybox

Styling HTML/CSS to Achieve the Given Effect

I'm using fancyBox3 in a project and I want to achieve the following:

This display of images

I wanted to know if there is a CSS trick to achieve it or if it requires some math and calculation to make it fit perfectly?

Solution

  • Basically, there are two ways - using JS (there are ton of scripts, for example https://github.com/brunjo/rowGrid.js, https://haltu.github.io/muuri/, https://github.com/kombai/freewall, http://miromannino.github.io/Justified-Gallery/) or CSS.

    The problem with CSS is that it is still not possible to create true "masonry style layout", but you can archive something similar, try googling for "masonry using css", you will find many articles and examples about this topic, for example, this one - https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb