Katie Katie - 8 months ago 35
AngularJS Question

Is there an easy way of creating a dynamic grid system for images of random sizes?

Here is an example from Pexels.com:

Picture from Pexels

As you can see there are various image sizes and they all fit perfectly in together. The project I am currently working on has 100 pictures each of them has a random size and I'd ideally like to show them like this.

Is there a simple way of doing this? I'm using

Angular Material
as my grid system and just plain CSS, and AngularJS.

Any help would be incredible! Thank you.


There are a lot of open source Angular directives out there. I googled

masonary view angular js

and found this AngularJS Masonary Directive

The concept you are describing is known as Masonary Layout