Relume Community Icon
Relume Community
  • 馃彔Home
  • 馃搮Events

  • 馃數Announcements
  • 馃數General
  • 馃數Getting Started
  • 馃數Issues
  • 馃數Showcase

Powered by Tightknit
General
General

Creating Centralized Designs in Webflow: Tips for Grid Layouts

Avatar of Emily M.Emily M.
路

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

  • Avatar of Matt J.
    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
  • Avatar of Emily M.
    Emily M.
    路

    Ah thank you so much! I love this slack channel

  • Avatar of Emily M.
    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!

  • Avatar of Josh D.
    Josh D.
    路

    Emily M. we鈥檙e currently building a website that鈥檚 using this exact layout. Can share a read only link if you wanna inspect! DM if you do.

  • Avatar of Amir M.
    Amir M.
    路

    Josh D. can you share with me