How to prevent grid from overflowing?

Hello, I have this code: https://codepen.io/VeljkoCukic/pen/abyKMeM

    grid-template-areas: 
      ". . ."
      ". . .";

I have a problem with responsiveness of this form. When the screen shrinks, parent container which has the display of grid shrinks as well but the grid doesn’t change and overflows and I have no idea how to fix this. Thanks in advance!

When you use template areas, it fixes the number of cols and rows. If the content is too wide, it overflows. In this case you should restrict the site of the container using min-width, and/or use media queries to control the behavior.

Otherwise, just use auto-fit(minmax(<min>,<max>)) property in the grid-template-colums.