Clever Geek Handbook

Arrange images of different sizes neatly on the grid

I am trying to arrange images in a neatly packed grid like in the screenshot. Images come from CMS, so they can be of any size.

How can I make this work with either CSS or JS?

enter image description here

+3


source to share


2 answers


There are various link libraries js

which are already present as



You can check how to replicate a full stack pinterest.com

+3


source


Try this, hope it helps. You just have to add a border between the images of your choice.



<div id="image-container">
    <img src="http://fakeimg.pl/300/">
    <img src="http://fakeimg.pl/250x100/">
    ...
</div>

#image-container {
  line-height: 0;

  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px; 
}
+2


source






More articles:


All Articles