Image Issues | Next.js | Page 1

onyx night Dec 27, 2021, 4:44 PM

#

@crude solar i'd like the height of each image to be unconstrained

#

as in, none of the images are the same height but the same width

#

you can sort of see the "staggered" look i'm talking about on pinterest

crude solar Dec 27, 2021, 5:08 PM

#

Yeah, that's not next/image issue. More of how you will do the masonry layout. Search for masonry layout. Maybe this will help: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ Probably the easiest would be to use css columns. So if you're using tailwind: https://tailwindcss.com/docs/columns

onyx night Dec 27, 2021, 5:42 PM

#

I'm using grids in tailwind

#

they r suited to this exact purpose

#

It's not an issue i'm trying to solve

#

I'm trying to work out how to make my images maximum width and unconstrained height

#

I can do it with tailwind and regular images

crude solar Dec 27, 2021, 5:46 PM

#

That is very doubtful with css grid

#

Are you sure you got it working with grid and regular imgs? With no vertical spaces between images?

#

Can you show a screen where you implemented it with css grid ?

onyx night Dec 27, 2021, 6:02 PM

#

My bad... you are right (I misremembered how I did it a while back!) I'm still having a few issues letting Image fill the horizontal space

#

I think getting it to work with one column and expanding it is the best way to go

#Image Issues