Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Grid Layout Flexible Sized Grids Repeat Tracks with auto-fill and auto-fit

Amandeep Pasricha
Amandeep Pasricha
14,932 Points
Posted by Amandeep Pasricha
Amandeep Pasricha
14,932 Points

Should I use a px or a percentage value for a grid-template-cols/rows?

One small stupid thing that trips me up is whether I should use a px or a margin to for an element when the goal is to make a website responsive. Would a grid-template column be less responsive if I had put a column of 6% versus a pixel (px) width value? What is the point of pointing in px width values if the goal is to make a website responsive? If I resize the browser window, the px width column certainly wouldn't resize accordingly, so wouldn't that make the website partially unresponsive?

1 Answer

Ling Lei
Ling Lei
6,099 Points
Ling Lei
Ling Lei
6,099 Points

When we talk about responsive websites it isn't just about scaling down the size of the content. It also regards concepts like adjusting the layout of the page to fit the screen. If I build a website with a mobile first approach, I might only have it be one column wide (so the content is easier to read for the user), but as the screen gets larger (say a tablet or laptop) I might want to change the page layout and adjust it to a two or three column layout. I still debate whether I want to use px, vh/vw or % and I just experiment and see what works best when swapping between screen sizes.