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
Jonathan Grieve
Treehouse Moderator 91,253 PointsCSS Grid for Layout
I love grid. Does it feel like "cheating" to anyone else? As in, is it the same as layout using tables from back in the day?
Are we supposed to be sticking with Flexbox or float layout for now?
I'm using multiple grid containers on one project for layout but I think I saw we're supposed to use it in tandem with Flexbox somehow? But I feel like Grid can solve a lot of layout headaches for us.
Would love to hear everyone's thoughts on this :)
3 Answers
Kevin Korte
28,149 PointsI'm okay with anything that makes my life easier, I'll call that a convenience, not a cheat LOL. What I've found that works really well is to lay out an overall grid, and then turn each section of a grid into a flexbox component. An example, might be centering text inside of a grid container. Or, use flexbox to create a fixed header/footer (or both) with scrollable content in the middle. (Think slack's sidebar), and put that sidebar inside of a grid element thought. The possibilities are endless.
David Moorhead
18,005 PointsThanks, Jonathan! I'm glad you brought up the topic. Mine is a celebratory post. I'm a newbie to numerous languages that can produce a website.
Still, I finished today my draft profile using CSS and Grid, which were surprisingly validated along with my html, "Congratulations! No Error Found" by W3C.
Some twenty hours after start and two weeks early, the page trends the ideas of simplicity while accessible and responsive. Finishing text and installing two images remain for completion of the profile by July first. I'm also considering flexbox, that is if my application of it doesn't mess things up! We'll see.
Next, for Jonathan and my eyes only :) That subtle voice kept saying, "You cannot finish this page. You think you can learn fast enough?" Time and again, when subtly began raging on, I would say out loud in front of my monitor with fists above my head, "I CAN DO THIS!" Over and over. (I'm giggling at myself, again, before contemplating the deep dive into Grid and Flexbox in a few days.)
Thanks again, Jonathan. Best to All.
Jonathan Grieve
Treehouse Moderator 91,253 PointsOne thing I know about the creative industry is you can never finish a job fast enough because a job is never truly finished.
I think Grid and Flexbox... either of those are the way forward... but even today I find myself scratching my head about putting complex layouts together using those tools... not just for one screen layout... but for the next one too. So I'm afraid I find myself easily going back to the tried and trusted box model.
Good luck with your deep dive into Flex and Grid. I still need to find the time to do time. And thanks for your feedback. :)
Steven Parker
231,248 PointsGrids can certainly be like tables if you want, but they do things tables never could such as "auto-fit". In a table, the number of columns is fixed and does not adapt to window sizes (without media queries).
The only reason I can think of to avoid grids in favor of other layout technologies like flexbox is if you have a need to support older browsers. I'm intentionally a "late adopter" but I'm ready to start using grids now myself.
You can use grids and flexbox together if makes things more convenient, but I'm not aware of any guideline that says you should if you can accomplish what you want otherwise. I'd personally use grids alone unless something I need can't be done that way.
Jonathan Grieve
Treehouse Moderator 91,253 PointsI think it was something I heard in the CSS Grid Course here that the technologies should be used together but not as a replacement for each other which muddy's the waters a bit for me when it comes to grid. and it's why I haven't used it as much.
I think support has gotten better though since the course was released and I see Chrome Dev Tools is showing grid lines which is a plus :)