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

i have a question about CSS Grid and units of measurement within the grid

I'm trying to build a website for a local Chinese restaurant however I wanted to build a mock-up of some sort in Mozilla Thimble. All I wanted to do is create a responsive image gallery within the main element o at least have an idea of how to do it. I tried a nested grid but it doesn't wrap well. I just wanted perfectly layout images of Chinese food within the main element. I've tried several units of measurement for the second row such as auto, 1fr, 300%. The 1st row is the header and seems to grow for some reason. The main element seems to stay large also when I did have it somewhat work it had a tremendous margin to the right and was flushed to the left. I am very frustrated and thinking about going to Bootstrap, all I want is to understand this better because this is not easy. I know there isn't any one way but there has to be a best practice for this. Below is a link to the site. Can please someone help, I feel stuck at this basic level and proceed from here.

https://thimbleprojects.org/jtorr14/407828