Kevin Powell - Community•10mo ago

most efficient layout option

Hey, i'm wondering the most efficient way to layout the size of the image in this design on both screen sizes. - on the mobile version, the image height is smaller than the height of the content below so would ya'll recommend something like a grid-template-rows: .6fr 1fr; / grid-template-rows: 1fr 2fr; or not using grid or flexbox and just setting a min-height on the div containing it? But then i was thinking since it get's placed into a grid on desktop that the grid option would be better? But ultimately i'm not sure on the most beneficial approach for this sort of layout. - on the desktop version, it's kind of the same question, would you recommend something like a grid-template-rows or height based solution for the ratio between the larger image and group of smaller ones underneath? I would appreciate anyone's opinion on this, thanks in advance.

12 Replies

croganm•10mo ago

When I did the same thing, I ended up using flex 🙂 https://keen-cascaron-f60af0.netlify.app/ I did this a while ago so I'm sure I've made improvements in my coding since lol I had both a mobile and and desktop gallery, not sure I'd do it that way again

snxxwyy•10mo ago

oh that's such a coincidence 😅, i much appreciate that! when i complete it i can send it here so we can compare methods if you'd like?

croganm•10mo ago

Yea sure! I did that so long ago that I'd love to see someone try a more modern way haha

snxxwyy•10mo ago

sounds good! Thank you for your help!

snxxwyy•10mo ago

@croganm Hey! i completed the majority of it but encountered an bit of a dilemma. the small gallery underneath the main image on the desktop view gets pushed outside of it's container due to the height of 100% for the div holding the image from from mobile view getting carried over. If i remove this on the desktop view the image disappears as it's using a background image, i know that some solutions could be to add some padding to the image div or have a hidden img tag that appears on desktop only but I'm not entirely sure what the best soltution would be, I'd really appreciate your opinion on this if you've got the time :), i hope this gives a nice comparison for you though! 👍🏻 apologies for any sort of rookie mistakes you may find, i'm just getting into building full sites after learning about everything 😅, https://codepen.io/deerCabin/pen/JjwGjXQ

CodePen

sneaker website

...

croganm•10mo ago

That was so weird! Not sure what caused it but I just just did the following:

.product__gallery {
    display: flex;
    flex-direction: column;
}
.product__image {
    /* align-self: start; THIS NEEDS TO BE REMOVED*/
    border-radius: 1em;
}

.product__gallery {
    display: flex;
    flex-direction: column;
}
.product__image {
    /* align-self: start; THIS NEEDS TO BE REMOVED*/
    border-radius: 1em;
}

It just chose to overflow unless I made the parent container a flex.... Could be because you're using a div with a background and height 100% rather than an img element? Not too sure...

snxxwyy•10mo ago

Yeah I think it's to do with the height 100% taking up the whole container

croganm•10mo ago

Yea I think that could be it. Since there's no content to give it a guideline for height, it just took up the same height as the text, leaving no room for the thumbnails

snxxwyy•10mo ago

Ah well flex it is then, thank you for letting me know! 👍🏻 Yeah exactly what I was thinking, glad we figured it out! Did it give you any insight on modern solutions?

croganm•10mo ago

Yes! I'd approach it the same myself now a days 🙂 very nice! Are you going to implement the javascript as well?

snxxwyy•10mo ago

Awesome! 🙂 Thank you! I haven't really started learning that yet as I'm focusing on perfecting html and css but when i get round to it I'll go back through and add it all in!

croganm•10mo ago

👏

Gaming

Programming

most efficient layout option