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! While you're at it, check out some resources Treehouse students have shared here.

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

General Discussion

Joseph Torres
Joseph Torres
6,282 Points
Posted by Joseph Torres
Joseph Torres
6,282 Points

For CSS Grids, what unit of measurement be used?

I've px's percentages used a lot and was wondering if that's best practice because I thought px's should not be used for responsive design. Should I use 1fr, px, em, rem or what is best?

1 Answer

Daan Schouten
Daan Schouten
14,454 Points
Daan Schouten
Daan Schouten
14,454 Points

Relative measures such as % are best when it comes to width. If you have two divs positioned next to each other, you can give them both a 50% width. This ratio will persist regardless of the screen width the user has.

When it comes to height, relative measures are less useful. You don't want to use percentages, because then your divs' height will depend on the length of your page. Measures such as vh (vertical height) take the screen height of the user, so 10vh would be 10% of the screen height. This can work really well sometimes, but if you don't need to hardcode your height, it's best to just leave it as is (auto).

Joseph Torres
Joseph Torres
6,282 Points
Joseph Torres
Joseph Torres
6,282 Points

Thank you for your reply. I was just confused because the CSS Grid track show a lot pixels being used. So for example, when creating the structure in HTML: <main> <section></section> <section></section> <section></section> </main>

And in CSS, I see for example: main { max-width: 1220px; width: 90%; }

The above is an example but believe me not being clear is completely preventing me from going further. I want to create a website based on CSS grid and I just need a kick start. Please help thank you.