I’ve tried setting up a grid to match my wireframes but for some reason I’m really struggling to have them look the way I want. I’ve tried using FR, VW, and percentages as the column width, but want it to be responsive across screen sizes. I’ve also tried wrapping the images in div’s and setting them to specific aspect ratios/widths.
I’m not sure if I’m missing something super obvious or what but any help/suggestions would be greatly appreciated!! Thank you
hi @Sara_Barr if you do not have developer experience and good understanding of CSS Grid this will be for you IMO challenging task and it will take good amount of media queries changes.
I can only suggest to split you giant grid into 3 smaller section make it for you more manageable. Second section can be only 9 cols instead 18 but it all depend how images (and other stuff ) will be positioned on mobile devices(tablet, tablet landscape, mobile, mobile landscape).
Before you will put hands on keyboard you should have set everything on paper (at least desktop, tablet portrait and mobile portrait) as you will most probably need change number of columns based on device and re-arrange images. managing 18 cols is unusual set to make responsiveness easy but … It may take you a bit of time to make it as close as you have it on paper.
Try to find some examples in ‘made in webflow’ to see how it can be done. It can be challenging to make it right and still look good.
