Something doesn’t work with a grid and the only explanation for the problem that I can think of is a bug - possibly in the grid, but it might be something else entirely.
I’m using a grid to display information on my service. It looks like this:
I structured it this way:
The background “Service BG” is a div and it’s flex (vertically, aligned towards top and bottom). There is an icon with a white circle around it, a title and some text underneath it. I want the title and the icon to be in the exact same position in every grid box, so I put them in a div and set the hight to 20%.
I did this in one grid box and then copied it into the other grid elements. Now I want to change the text in the respective boxes, but for some reason it won’t work in one of them. For some reason it looks like this, but only in one of the boxes.
It’s telling me in the designer surface that it looks this weird because the mini title is no longer inside the div. This is weird, because I never took it out of it. So somehow it automatically took an element out of the div.
But I can’t fix it by putting the element back inside the div because according to the navigator the element is still inside the div.
I was wondering whether there was an issue with the background being a flex box, so I changed it to the “normal” state. It looked normal in every box, except the buggy one:
I have no explanation as to why there is a discrepancy between what the navigator and the design surface are telling me - other than a bug.
I hope this makes sense. It’s actually quite difficult to explain this stuff well, so I’m sorry if this sounded patronising or was a bit unclear 
. Any help is appreciated 
Here is my site Read-Only: LINK
Glad that I could help! 