I see.

https://jsfiddle.net/Lah5g3vb/

Changes:

- each col is now 1fr (3 cols, 33% each)

- the child elements align inside the col using `justify-self: start | center | end`

Not good, because now the elements are limited to 33% width of the container.

See: https://jsfiddle.net/e0un5Lxk/

The middle content is unnecessarily wrapped into two lines, even though there's plenty of space available.

You can also use `minmax(min-content, max-content)` for the center col: (https://jsfiddle.net/y193p2b6/).

But this does not keep the center col exactly centered, but it does allow the content to take the free white space and then wrap when needed.

In your original post with Swift, what happens?

I am not familiar with auto layout so I do not know the exact behaviour vs CSS. Do you have a few screen shots of how it would handle different sized content?

But now you just added `whitespace: no-wrap` to the middle element, with `overflow: visible`, to force it into a single line. That's hardly a generic solution, because it makes assumptions about the contained items... i.e. applying `whitespace: no-wrap` and `overflow: visible` will typically break the appearance of things.

Regarding AutoLayout: the six constraints from my original comment, don't say anything about the relationship between the left/middle/right items, so they will simply overlap if there isn't enough space. This can be remedied by adding two extra constraints:

1. left.right < middle.left

2. middle.right < right.left

It's just a bunch of equations. No weird tricks, no special cases, no hacks. You describe what you want with equations, and the solver spits out the solution.

Do you have an email? I am thinking of doing a blog post comparing css/auto layout, and would like your input?

Sure: gvjjdcnohdt@protonmail.com

Yeh, I edited my reply, I realised what you meant afterwards.

Auto layout does sound neat.