[wruza]

In media query section, a gif that shows text block going down, you can see that at mobile scales the spacing between social icons jumps suddenly for seemingly no reason. Was that intended?

In a gif between “It’s probably best to show you” and “Voila”, social icons don’t stick to the image, dangling at the bottom instead. How to make them stick?

Asking it because most commenters here seem to praise the grid, but ignore these little facts. Interesting if these are by design or by overlook and how to fix that.

[wruza]

As a follow up, I’d like to try expressing the same with constraints instead of a grid. E.g.:

$image is at the top left, xy-padded by P, which is 5% of its width. To the right of it x-padded by P on both sides is a $textblock, with a minimum width of that of the image, aligned by top. If their natural/defined minimums make them not fit the width of the screen, $textblock goes below the $socialbtns padded by P/2, aligned by width of $image. $socialbtns are below the image aligned to the left, y-padded by P/2.

This should be expressed more formally, but you get the idea. Why can’t we just do this and instead have to solve some unique puzzle by hand every time we need some layout?

(Made few edits to constraints, now seems fine)

[kroltan]

Android has ConstraintLayout with some of that, but it's just "spaces between sibling edges", not quite as flexible as you describe.

[JoBrad]

It does jump, but perhaps this is an unintended consequence that makes it easier to tap those icons?