Need help with this Layout
Hi, guys, for a few days I'm struggling with this layout.
Can anyone tell me how to archive this layout?
Problem I'm facing,
1) making the images ratio the same for different devices (mostly for big to bigger screens)
2) i tried the grid but overlapping images and managing the grid area and image aspect ratio is painful.
3) i also tried px and vw vh sizes for images which also did not keep the images proportionate.
For mobile it will be simple like 2 images per row and the name thing will be at the top.
So what would be the best way to achieve the same layout.
Many thanks 🙏
22 Replies
this is a designer's dream, a programmer's nightmare
honestly, i personally can't see a good way to implement this without a bunch of grid columns and rows
I'd probably try a basic grid and then a translation for the images to get them to be in the right place
Maybe four or five columns?
that could also work
You'd have to use vw for the translation though
or just ... screenshot this and make it the page 🤣
yes, i am joking
Also a solution 😄
would save a huge amount of headaches
You could even make it not that bad if you use an image set
and with an image map, you could make the button clickable
Wow, really going old school there
that or a positioned link
with an optimized avif image, or even a webp (yuck) you could get good results
If it doesn't have to be clickable and the images don't need to be replaced often, I'd do the screenshot thing tbh. Export a few different sizes and let the browser pick the right one
Otherwise, the basic grid with translation. I don't think you can make an image map even vaguely accessible
yup, but i would use <figure> with <source> elements and an <img>, instead of a srcset
the srcset always worked like junk for me, but the <picture> always worked (and replaced images) without any troubles
Fair enough
in case you want to redistribute the images and stuff, for mobile, the <picture> replaces the image seamlessly
the only problem is text, which may become hard to read/blurry af
They have to be clickable. Haha.
what has to be clickable?
I would probably a simple 2 column grid for smaller viewports and then absolutely positioning each item for larger screens.
you can make it into 3 rows (not columns) for mobile
For mobile it's just flex and the client liked it, but issue with bigger screen, I used grid, and images have aspect ratios so maintaining image sizes and overlapping is nightmare here....
maintaining aspect ratios is easy
this is also going to be a lot easier to talk about in specifics if you share a version of what you tried
live code does wonders