How to create a responsive grid layout?

I want to automatically adjust the columns when you reize the window. It must start with 3 columns and wen you make the screen smaller 2 columns and when it’s really small, 1 column. How do I do this?

Also, when I make the screen a little bit smaller, a horizontal scrollbar appears and it seems that the grid items are sticking out. It should stay within the grid-container. How do I do this?

Thnx!

https://codepen.io/helloworld123-/full/wvBaRZW