How to use GRID to move elements to the next line when elements go beyond the block width?

Question

css

Greetings.
Entangled in grids. In theory, everything seems to be clear, but in practice it is not very clear. For example, there is a block centered horizontally and it has elements of different widths. When the browser window shrinks, then the elements should wrap to a new line, and here is the implementation . But here's how to do the same thing, only without setting a minimum width for the elements - I don't understand, i.e. that the elements should be allowed to have an arbitrary width. And I tried it this way and that... I get the feeling that grids are not suitable for everyone, but who would tell me about it - where it is and where it is not worth using grids + solving this problem on grids.
Tell me the implementation on grids and where they should be used, and where not.