Responsive pinterest like gallery
so i need to create this and i have some what succeeded in creating it for desktop but can't seem to be able to convert this to mobile, don't wanna use extra code so can't copy it, even if i do copy it the images are not correctly resizing themselves and the alignment is off in both mobile and desktop, can anyone help me with this one?
Reference images (both desktop and mobile):
https://imgur.com/a/ZxBC3ci
Code (desktop):
https://stackblitz.com/edit/stackblitz-starters-m7frsq?file=index.html
Imgur
Untitled Album
6 Replies
A quick glance at the images shows that the order of the images (categories) changes completely between desktop and mobile. This makes it harder to create any "natural" responsiveness relying simply, for example, on the number of columns.
I would look at using grid-template-areas. These make it easy to switch the positioning according to viewport size.
can you show a little demo of some kind so i can get idea of how its working and if i make two separate workings for desktop and mobile will this then be possible?
OK, this is a quick demo using grid-template-areas.
https://codepen.io/cbolson/pen/eYqNpON
To get it closer to your design it might actually be better to use grid lines but these are more complex (at least in my opinion) and would require a lot more working out.
Hopefully at least with this demo you will understand what I was referring too.
Note - I have used custom properties to define the grid-area assignation for each "category" so as to not have to write them all out in the CSS
well thanks for the help I will give this a try and will let you know
just one thing if i make it a href tag will that effect the layout by any means?
No, that shouldn’t make any difference.
(just updated my demo to use hrefs just to test)
Thanks for the help really appreciate it, its working perfectly now.