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


so I am getting a bit confused with CSS grids, CSS Floats and CSS FlexBox??

so I am getting a bit confused with CSS grids, CSS Floats and CSS FlexBox?? Which one is best? do you use certain ones to achieve a certain result? i have tried looking it up and apparently from explanations to what they are , I'm still unsure about it ...

So from what I can understand CSS grid is no longer used much as it doesn't help with the whole responsive design, . . .Floats are used to make a more a more flexible, perhaps masonry layout, .. where as flex box is more like columns and rows .. ????

I am only guess from the things I have read,.. any clarification would be awesome!!

3 Answers

djsands I use some features from both CSS Grid and Flexbox together. I use CSS grid to, as the name states, set up a grid. It helps me to ensure that The sections on my page are evenly spaced out and helps me stick to a specific structure. I use flexbox on the elements inside of my CSS grid to align them properly within a grid section (properties like "align-items", or "justify-content" can make centering your content (both horizontally and vertically) very simple. This article might help a little: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout . Just know that you do not necessarily have to choose one or the other, they can be used together. An important thing to keep in mind though, is if you are developing for a company, depending on what browsers and versions of browsers you may be using, not all features are available. You can reference the website caniuse.com to see what features of grid or flexbox are available in each version of all the browsers.

Hope this helps!

Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Have a look at Bootstrap 4 - it has everything you want to know and then some. https://getbootstrap.com/docs/4.3/getting-started/introduction/ I work on version 4 sites that used to be version 3 and the difference is incredible. V4 is much improved and more granular.

thanks, guys. That's great I am looking at the links as we speak ..