Creating Centralized Designs in Webflow: Tips for Grid Layouts

·

How would you guys make this design in Webflow? I tried using a 5 column grid with manual position for the content and the image, but this means I don't have central control of these designs in one place.

5 comments

Matt J.
·
Emily M. Love me some box model questions! I would start by not using grid and use flex. But you'll have to start first by resetting those pink labels for the manual positions. And then I would use negative margin on the content to have it overlap the image and make sure to give it a z-index higher than the image. I used 200px for the negative margin but I would do rems. You can adjust this accordingly for responsive.
🙌1
Emily M.
·
Ah thank you so much! I love this slack channel
Emily M.
·
Another question - I have a flipped version of this design, with the image on the left and text on the right. Would you give all of these sections and elements the same class name, whether they have the image on the right or the left? I had assumed that I would need a different class name for the flipped version, but I think it actually isn't necessary so long as the elements are ordered differently in the dom... Hope that makes sense!
Josh D.
·
Emily M. we’re currently building a website that’s using this exact layout. Can share a read only link if you wanna inspect! DM if you do.
Amir M.
·
Josh D. can you share with me