How to make a css grid responsive,If the browser font size is changed

#1

How can i make a css grid responsive when the browsers default font-size is changed.I am aware that if i define the dimensions with ‘rem’ it helps when the browser font-size is increased.I have created a codepen for better assesment of the problem

Here is the link for the codepen https://codepen.io/saidarshan/pen/oNbjWyb

I have wrapper div with a class called ‘userpage-container’(The markup is too much to paste here.Please refer the codenpen).

The styles for the div with the class ‘.userpage-container’ is as below:

   .userpage-container{
      max-width: 910px;
      height: max-content;
      display: grid;
      grid-template-columns: repeat(12,1fr);
      grid-template-rows: repeat(12,60px);
      gap: 1rem;
    }

I tried using grid-auto-rows:1fr that did not work out.
The grid currently breaks when the font size of a browser is increased.
I will attach a screenshot of how the grid breaks now being not responsive to the font-size increase
enter image description here

Please refer the codepen.Styles for the ‘.userpage-container’ is right at top.
Im very new to CSS grid and programming as a whole.Please help me out with this problem.Thank you.

#2