Hi @Kvanti ! I have the answer to your first question.
It's about "align-content" property. Here is a beautiful explanation of what this property does:
Couldn't have explained it better myself!
In short, this property was set to "stretch" by default, and that's why you got those big vertical gaps between your items.
Anyway, you should check "gap" property too!
Here's your code with align-content and justify-content properties (the second one is added because it nicely splits 3rd and 4th item).
(Yeah.. I'm not crazy, as far as I know, it's just nobody answered and I felt like I was talking to myself. Also, I didn't want to delete the question and answer, because, who knows, maybe it'll be useful to someone else).