[emadda]

Grid allows minmax(a, b) to specify the bounds of tracks. Possible values can be the remaining free space in the parent (fr), or the size of the content in the child.

There is also fit-content:

E.g: grid-template-columns: fit-content(150px) …

[meindnoch]

Sorry, but I don't understand what you're describing. Can you maybe show it in jsfiddle?

[emadda]

I am just saying the columns of the grid can be dynamically sized depending on their contents.

Tracks is a grid term for rows or columns, as it works in both dimensions.

[meindnoch]

I'd like you to demonstrate your approach with this jsfiddle: https://jsfiddle.net/nbdowrcm/

As you can see, the middle element is not centered.

[emadda]

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`

[meindnoch]

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.

[emadda]

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?