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
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.