Grid Layout distress

Hi,

Im trying to add 2 grids to my container- one with 2 columns and the other with 1 column. I am not able to add spacing between them in a way that makes the design responsive. I have tried this with div blocks as well. This is very basic but I’m really struggling! Any help will be appreciated please

Thank you


Here is my site Read-Only: [LINK][1]

https://preview.webflow.com/preview/dot-and-grid?utm_medium=preview_link&utm_source=designer&utm_content=dot-and-grid&preview=247225e6a379ef2fe4908f1161e1f1d1&pageId=63eb47454d18140a5142d3bf&workflow=preview

hi @dotandgrid here are some notes

  1. when you have only one column you do not need CSS Grid
  2. you can use rem’s instead pixels
  3. when you use rem’s or pixels you should adjust gap for each viewport or have a custom code that will calculate it automatically for you.
  4. spacing two Grid-5 from each other use margin-bottom that will have eg. value identical as your grid gap.
  5. instead of setting max-height on images use aspect ratio
  6. is recommended to wrap images in div elements.
  1. how do i find rem’s/ pixels?
  2. i’ve tried adding margin bottom but it is not working

thanks for the other tips

hi @dotandgrid the best I can reccomand it to visit WF University and finish their free courses where you will learn how to work with this platform.

Anyway, units are on right side of input field where you adding the value. when you click on it it will open option with other units

It worked for me :man_shrugging:

ohhh right, im sorry i just understood what you meant how silly of me. thanks for all your advice

1 Like