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

CSS

Dean Conway
Dean Conway
3,301 Points

Floats, Flexbox or CSS grid?

Hi

Now that CSS Grid has arrived as the latest cool kid on the CSS scene which, from what I have read, seems to be revolutionising the way we will be building websites in the near future. But now I am totally unsure if I should be using Grid 100% of the time from now on in all my web projects that I build from scratch or is it still in to much of a half baked state to be used at a production level?

If it is, then that still leaves with choosing between Floats and Flexbox, or does it not really matter which method I pick as long as I stick to it and use it consistently throughout my project?

Dean

4 Answers

Bruno Navarrete
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bruno Navarrete
Full Stack JavaScript Techdegree Graduate 22,246 Points

I'd recommend keeping true to what you like right now. Flexbox still covers pretty much everything you need to create dynamic, responsive websites (the alpha-6 version of Bootstrap 4 uses a flexbox grid). Still, keep your eye on CSS-grid and any new technology out there ;)

Rhys Kearns
Rhys Kearns
4,976 Points

Practical: CSS Grids > Flexbox > Floats

Browser Support: Floats > Flexbox > CSS Grids

Although Flexbox is pretty much supported by all browsers it really depends on what you are working on - I would recommend staying away from CSS-Grids whilst it is so badly supported although it is the future of CSS. http://caniuse.com/#search=flexbox http://caniuse.com/#search=css-grid

Dean Conway
Dean Conway
3,301 Points

Hi Rhys & Bruno.

Thank you for both for your answers.

To be honest Bruno, I've invested a lot of time trying to get my head round floats, (I'm a designer trying to learn how to code) so I would rather stay committed to using floats. I just did not want google ranking my site lower because I am using an older technique of css layout compared to Flexbox or Grid or for potential employers to inspect my portfolio code, see that I've used floats and then think of me as a less skilled candidate because i'm not using the latest techniques even though they all end up achieving the same responsive results just in different ways - Do you think that would be the case?

Rhys Kearns
Rhys Kearns
4,976 Points

The point of using the latest techniques isn't because you are more skilled or because you want to follow everyone else, its because they have some incredibly useful tools. Floats work but flexbox has so many cool features for you to use, whilst CSS-Grids does also its just not supported enough yet, I would say you should avoid using floats unless necessary as Flexbox is the near future of CSS.

Dean Conway
Dean Conway
3,301 Points

Ok thanks for your feedback Rhys, things is the side project I am working on at the moment to practice my coding skills I have started to use floats, so I might as well stick to carrying on using them as the underlying method for controlling the layout of my site. But for my portfolio website, which I have already wrote the html for but no CSS yet, maybe that would be a good time to start understanding and implementing the Flexbox technique.

Rhys Kearns
Rhys Kearns
4,976 Points

Sounds like a good idea :) No point in redoing whole projects - good luck!

Bruno Navarrete
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bruno Navarrete
Full Stack JavaScript Techdegree Graduate 22,246 Points

That does sound like a good idea. A new (deadline-less) project is always the best moment to start lerning and experimenting. Who knows? Maybe you'll want to re-do your first project or even start a new one just to practice ;)