How to Fix Grid Spacing Issue

Hello,

I am trying to reduce the margins of the grid components to match my actual design. I am unable to fix it. Please help.

Here it is on Webflow:

Here it is on Photoshop:

Here is my Webflow Project:
https://preview.webflow.com/preview/vanguard-gaming?utm_source=vanguard-gaming&preview=3f0ccc3474a412168164f17df1a9892e

Thanks

Hi Chethankvs,

You could try to use Dynamic listing to get your BG on your collection item instead of using an image component, you have much more control using a background on a div in general, Images component have aspect ratio issues in some cases.

Also I find the combo container and columns rather limiting in most cases, you may want to try the divs and flexbox combo, much more freedom.

Cheers,

Hey,

I am new to Webflow so I am not aware of a few terms.

Can you tell me where I can find this Dynamic Listing option?
Also, I tried using Div blocks but I was not able to place the 3 boxes in such fashion. And the content is driven from CMS. How do I incorporate that in Div Block?

Thanks

I did try. If you dont mind can you take a look and share the exact settings?

Hello @Chethankvs

First of all your images have space around them. See bellow

I think the problem comes from here. I’ts better to use divs with background image like @ColibriMedia suggests.

First remove the space around the images. Next you can use divs or link blocks with background photos and add a radius and shadow to mach your design.

Piter

Awesome Thanks. I see the Problem.

Another Question. How do I arrange the div blocks in such a fashion with 1 columns and 2 rows? Should I use the Flex Mode?

I can show you :wink: Using flex box is way better.

Please do. Its easier to understand when I see it :slight_smile:

Absolutely! Here’s how it looks right now

The body is another color so you can see the shadow. I will show you what I’ve done.

Piter

Okey, here’s my approach:

Check the video and tell me if you have problems > https://www.useloom.com/share/a9ffc19331dd495f89b913bc10187b37

I think with video is better, but my mic is not working…You will do it :muscle:

Piter

1 Like

Great video @PiterDimitrov. Hopefully CSS-Grid will be released soon.

1 Like

OMG! You are a Life Saver!

I am very very grateful.

Thanks

1 Like

Yeaa will be very very nice! Flex box is amazing too :blush:

Thank you! Happy to help

Piter