Grid layout with each element taking up only the space it needs

Question

I currently have this picture shown:

It is made by:

.gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
 }

I've looked and it seems to not be possible to have each element only take up the space it needs instead of the height of the highest image? I've tried setting grid-auto-rows to auto and that does not change anything.

Any alternative solution to grid is fine also. I've tried flexbox and setting the flex-basis but can't seem to get that working either.

What do you WANT it to look like? Do you want the images to all move upwards as much as possible so there is no whitespace? — Aaron Krajeski, May 17 '18 at 18:26
Yes, I would like the elements to only take up the space of their image instead of the entire height of the tallest element — Vincent Nguyen, May 17 '18 at 18:27
Obviously this is **not** an actual *grid* is it?.....It's just columns and without rows...it's not a grid. — Paulie_D, May 17 '18 at 20:20

score 0 · Accepted Answer · answered May 17 '18 at 19:03

0

Easy answer that doesn't require either grid or flexbox:

I simply set .gallery-grid to have column-width: 300px

answered May 17 '18 at 19:03

Vincent Nguyen

1,555
4
18
33

Grid layout with each element taking up only the space it needs

1 Answers1