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

Posted by Derick Moncado
Derick Moncado
23,259 Points

Flexbox or grid layout?

Hi Guys,

I'm about to start a personal project (website) and want to make it responsive and as fluid as possible. I'm also using Sass/Compass fo the styling. Basically, I want this puppy to be as up-to-date and future proof as possible..at least for now.

It will be the first project for me to tackle since hearing/learning about Flexbox and grid systems. (I really wanna ditch the old methods of percentage based widths, absolute positioning, floats, etc.)

This grid layout method seems pretty solid and flexible in terms of usage and I'm really attracted to it, but Flexbox is also equally as impressive however I know it's new and still a little shaky on some browser support.

So my question is ...what technique should I use? Is Flexbox the future and do you think it will be the standard 'go-to' when laying out pages here in the coming future? Or is a grid system the better choice for now? Any thoughts or insight is appreciated :)

Thanks guys!

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

What browser are you needing to support? If you're unsure, I'd start with building a grid and get the site going, and start collecting information on the browsers your users are using.

If you are building a web tech blog, you could probably use flexbox today since most your users probably have the latest browser version and flexbox support looks great today for modern browsers. Most sites that's not the case. If you need to support IE9 or IE8 at all, you're going to have to use a grid.

You could consider writing a grid framework today, and than start writing your flexbox framework, and use browser specific hacks to server IE8 and IE9 the grid CSS, instead of the flexbox.

You could also use something like Modernizr, which has yepnope.js bundled with it, that can test for flexbox support, and based on that test, you can serve either a flexbox CSS grid, or a traditional grid CSS file.

http://caniuse.com/#search=flexbox

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> you can serve either a flexbox CSS grid, or a traditional grid CSS file

That would duplicate the CSS code needed for page layout with no appreciable benefit other than "flexbox is cool"

Derick Moncado
Derick Moncado
23,259 Points

Mostly just the mains. Chrome and Firefox, not to concerned about older versions on browsers but yeah I'm definitely leaning more towards a grid system. Thanks Kevin!

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

James Barnett not necessary. A possibility would be that you'd want to take advantage of some of Flexbox's powerful positioning features to get the site layout how you want, and your CSS grid layout could be a different and more simple layout that isn't twisting and contorting floats to do what you want. Hell, you could just use a grid framework for that part.

Depends on the goals of the website and the layout desires. There is not one answer fits all here. Flexbox is looking pretty viable today.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Grid system. Flexbox is still a few years off.

Derick Moncado
Derick Moncado
23,259 Points

Yeah I'm thinking grid for now too. Thanks James!

Gustavo Jiménez
Gustavo Jiménez
6,303 Points
Gustavo Jiménez
Gustavo Jiménez
6,303 Points

I've been wondering the same thing. According to "HTML5 Please", it seems that flexbox is ready to be used with decent browser support (I'm thinking autoprefixr for simplifying the vendor prefixes). Anything below IE9, it looks like there are ways of creating fallbacks. However, I haven't looked much into this apart from Modernizr.

A search for "flexbox" gives more info: http://html5please.com/

What do you think?