CSS Gird image gallery dense layout

HTML-CSS
1

Is there anyway to eliminate all the white spaces in between the pictures? and just let them organically laid out on the page? Given that the height of the picture can vary from time to time.

I tried using grid-auto-flow:dense; on the container itself, does not work like I expected.

2

I don’t think that is trivial. I would suggest having a look at masonary grid. Hope it helps

1 Like
3

thank you for the info! I will definitely check it out!

4

My pinterest clone project for fcc has some css for masonary. If you search github you may find others with different ways of doing it. hope it helps

1 Like
5

try

.gallery-wrapper {

column-count: 3;

}

1 Like
6

wow… that’s some dope project you got there! I will give it a try when I have time!