How to make a shift of the same type objects in HTML?

Question

css

Usually the elements go in a row until the free space runs out. After that, they start with a new line from the very edge, like the previous line. How can I shift relative to the previous line?
I would like to be able to simply display elements of the same type in a row without additional tricks. That being said, it would be nice if they would "jump" when the outer container is resized (the browser window is resized), but this is not required.
Maybe someone met with such a problem? Feeling that the solution should be simple.
An example in the image.