Streaming live at 10am (PST)

Images in a grid order

Hi everyone!

Please can someone offer some guidance on how to layout images on my website so that they can look like the picture below; Where there is even spacing between the images and the height size all aligns;

I’m trying to make these link blocks btw, as each one will correspond to a different link and that in itself seems to be doing a whole new thing lol
I’ve tried using so many different techniques (including Grid, CMS etc.) but can’t figure out anything and it’s driving me nuts.!

48%20pm|690x410 !

(ignore the redo arrows, this is just something else entirely, sorry for any confusion) and thankyou so much for your help in advanced!

Hello @jonoshashee,

Wellcome to the community. What I would do is to create a section with 100vh, then add a container in the center (with black borders), and inside that container add a grid. On the grid I would add a link block to all the cells that need a picture and I would set the background image of the link blocks with the pictures you have on your design. I hope this helps.

Hi @Pablo_Cortes,

thanks for the warm welcome! :slight_smile:
I just gave that a try and i don’t know if im doing something wrong but the grid doesn’t react properly? (or something doesn’t at least lol)

So in the example picture i posted you will see photo’s that have both landscape and portrait pictures.

So in the grid process you posted, if i place a link block in with a BG image that is portrait and size it so that the grid matches, its hunky dory. But then if i do the next one with a landscape image, it doesn’t match up properly. Either the (landscape) image is cropped to fill the same height as the (portrait) image or its too small and doesn’t align when it matches the width

Does that make sense?

I see what you are saying @jonoshashee, but you have to understand that the image set as background image resizes to fit the space, however sometimes when working with grid is better just to add an image. There are many ways to work around with grid, maybe this presentation will help you better understand how grid works. https://docs.google.com/presentation/d/1KTiJD_OlEnIIG_H5oKi7tRyPJcYfk9_vcrm0PZaf7H4/edit#slide=id.g56875025a7_0_55
Let me know if you have more questions.