Trouble in using "em" "rem" and "%" in Grid- Need Guidance
I am using Grid in my recent practice and tried to use relative units for elements of grid items. As this is suggested that we shouldn't give height or width while using flexbox and grid so did i and couldn't use % unit for elements in grid items as height and width were not set . And while using "em" , as the font size of the element or its parent is not set and it willl use root element 16 px which would be same as using "rem". After using "rem" , content is overflowing out of grid making it irresponsive as 16px of root doesn't change with dimensions , so i would have to add multiple media queries.
Btw, i like to use %.
What should be my approach making it responsive?
I want to know multiple ways of it, if someone can tell me?
Checkout my Code Pen : https://codepen.io/Mubashir-Hassan-the-scripter/pen/NWZWmZr
6 Replies
how about you use 1fr 1fr?
also, like I said in the other post but adding it here for completion, rem and em are not relative units. They're fixed units.
Yeah, i also used them but issue comes when i have to set padding ,margin, font sizes etc of elements inside grid items .
So , i should set height & width and then use %, right?
or rely on media queries?
A few things to unpack here 😄
As this is suggested that we shouldn't give height or width while using flexbox and gridI mean, this is a very big it depends. Often you won't need to declare widths or heights, but never say never 😅.
i and couldn't use % unit for elements in grid items as height and width were not set
% will work for everything other than height in regular block elements (like margin, padding, etc). With grid items, % will work for width or height (and everything else), because it's based on the grid cell that the element is living in. I rarely have the need to use it, but again, that doesn't mean you never will.
What should be my approach making it responsive?Depends by what you mean by responsive. Do you want the layout to change? The font sizes to change? In this case, you have a pretty static grid at the bottom, and at one point, all that can't fit, so a media query to change the layout is probably the simplest solution.
or the opposite: a media query to set the layout
That will help me a lot . Thanks