Dane wrote:1. if you choose a narrow block grid with 2 columns, and one column is a text block, the other one is an image, I always have problems to adjust that, so that both have the same size. In the screenshot you can see it quite well, that the column with the text is larger than the image.
Unfortunately, this is pretty much how all grid systems work ... Columns will get created by width, but there is no "limit" or pre-defined height to the columns. As you can imagine, grids must be allowed to free flow vertically, and columns aren't linked to have the same height as each other ... The column row itself will of course be as tall as the tallest cell/column item inside.
There are some workaround solutions, but they are not all practical. In your case, how would you have it? Should the image scale vertically to fit the height of the text? That would make it either cropped or lose it's original aspect. And if the text gets longer, how should the image scale? It's not all logical.
The easy solution would be to NOT use a background behind the text, because then it would be perfectly acceptable if the text scrolls vertically beyond the image height.
Dane wrote:Is there a way to bring this always harmoniously to the same size? So that the photo always adapts to the size of the text block?
Perhaps, but not really logical ... It's not clear how the image should scale to fit the text ... What if the text becomes very long and tall? You could for example use "CSS aspect-ratio: 1/1" (or some other aspect) in CSS for each item, but then you are pre-defining aspect that the text must also fit inside.
Dane wrote:2. under the block grid I always have a larger empty line, but I don't know how to get rid of it?
This looks like natural paragraph "breathing" space to me, and should normally always be there. If the paragraph "Generell ..." has no empty space above it, it would be glued to previous section. This can be bypassed with CSS, but it's not recommended.
