How to create a grid of differently sized images without gaps using CSS?

Asked Feb 05 '18 at 14:40

Active Feb 05 '18 at 14:52

Viewed 153 times

I want to display a grid of images. Each row (contained in a div) spans the entire width of the screen and each image occupies one third of the width of the row. I have achieved this with the following CSS.

img {
    max-width: 33.33%;
}

The issue however is that because the images are of varying heights, each row has the height of the tallest image in the row. As a result there are vertical gaps in between the images of the different rows. I would like to make it so that if there is vertical space above an image it moves itself up to fill that space and so on with the images below it to give this effect.

Currently I am working on doing this with JavaScript, altering the relative position of each image to fill the space above with some success. But I believe there is a pure CSS way to achieve this.

edited Feb 05 '18 at 14:52

TylerH

20,799
66
75
101

asked Feb 05 '18 at 14:40

Adam

2,167
5
19
33

3

this style called Masonry here is a good lib for just that https://masonry.desandro.com/ – andrew s zachary Feb 05 '18 at 14:44
1

@andrew: It's also JS, which the OP is trying to get rid of. – cHao Feb 05 '18 at 14:47
did u try flex box – andrew s zachary Feb 05 '18 at 14:50
1

I have added the [tag:css-grid] and [tag:flexbox] tags for searchability, even though you have not attempted to use these implementations yet. – TylerH Feb 05 '18 at 14:52

How to create a grid of differently sized images without gaps using CSS?

0 Answers0