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:
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.
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.
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
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.
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.
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.
