IMHO you've really overthought this, mixing grid and flex willy-nilly for no reasons, not leveraging flex-wrap (which seems be a painfully common mistake), adding alignment you don't need.

And that's before we talk about using the most inaccessible metric (px) or the excess DIV for nothing and endless pointless classes for nothing.

Czech this out:

https://codepen.io/jason-knight/pen/abVxMGY

A fraction the markup, 2 lines and almost a third less code. You just let flex-wrap, width, and max-width do all your heavy lifting, using combinators to reduce the code size. No extra outer "container for nothing", no slopping classes into the markup as pointless bloat.

Remember, anyone telling you that increasing the size of your markup 50% or more is going to be "better" or "easier" is likely trying to pack your fudge.

This is also why I say the best way to make a "responsive grid" is to not use display:grid.