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