Streaming live at 10am (PST)

How to space with grid "fr" units? Best practice tips appreciated!

Hi guys!

Grid is confusing me for a while now and I do not seem to get behind it. Research and the good old trial and error didn’t help much so hopefully you can.

I’m trying to build a base grid to use for different column setups. It’s containing images (all with the same widths set to 800px but different heights) and a heading/ paragraph (both wrapped with 300px width divs).

From what I’ve been reading, the “fr” unit is a fraction of the available space in the grid container. That’s why I’ve expected it to work like a %-value of the whole width available. Using equally width elements should not create any problems when switching column order on a second grid with equally set “fr” units, right?

Here is the problem:

The space (-> the 0.25 fr column) in the grid is looking fine in the designer, but seems to be creating different spaces between image and text when previewing:

Please check the read-only, it’s more obvious there.

Would grid even be the best practice for such a layout?

Thanks in advance!


Here is my site Read-Only: LINK

Does anyone have an idea what’s going on with the spacing?

I tried to radically change the grid to a simple 4 column, 1 row layout (didn’t do it in the linked project though) and it’s still having a different spacing between image and text on each of the two sections. There is always a more space between them when the image is on the left compared to when it is centered.

Using %-units instead of “fr” didn’t help.

I’m sorry, but I don’t understand the issue. Maybe try to reword it again to avoid confusion? What exactly are you trying to achieve?

Hi,

thank you for taking the time!

I’ll try to explain it with a few screenshots.

This is my new and simple grid layout (it’s in my shared link now too):

I’m aiming for equal spacing between each element, even when changing the order or removing one of them:

The problem is, that they are not having the same spacing nor alignment at all in the preview:

I want the image and the text to have a persistant spacing in between regardless of the order of elements and to have elements to be aligned vertically when they are used in the same grid columns.

Somehow, my grid setup is not working for either way.

Is it possible for you to share the link?
I will have a look too :raised_hands:
Sorry for taking so long!

It’s kind of hard to get a grasp of what the layout is concretely when filled with content

I’d be glad if you could take a look. :sweat_smile:

The mockup for that specific layout is used in this project:

Shared Link

I hope this gives you an idea of what I’m looking for.

1 Like

For deterring the text to overspill their area, you can set the text wrapper to 100% width instead of 300px and give it a margin-bottom of 30px and remove the margin on the paragraph. Thatll make it look a bit nicer.

Its weird that one image is taller than the others though

1 Like

Just noticed, you use a lightbox and an img and the img has a fixed width value. Its a good practice to set the dimensions of images on their parent and not inside the little gear on the images.

1 Like

Thanks a million!

Your image sizing tip probably saved me quite a lot of time for future! I’ve set the dimension to the image wrapper instead of the image settings now.

For the different spacing: I guess I’ve just had my daily webflow facepalm moment. :man_facepalming:t2:

My images always appeard to be sitting in two full columns of my grid. Actually, it turns out that it just looked like it. When I changed my image sizing, I realised that the grid for the image on the left had never been aligned to the center. Which wasn’t a problem in the designer, but did result in a bigger spacing when in preview.

As soon as I set all images to center alignmend within the grid, the spacing looks good.

:webflow_heart:

1 Like

Glad you made it work :webflow_heart: