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 johnd3
johnd3
8,860 Points

Use Flexbox or a Grid (Neat)

Hi All!

So I want to start a new project, but I'm a bit confused if I should use Flexbox or a Grid (Bourbon Neat) for the layout of the website. What are the main differences between both? What do you all use for all your projects?

Thanks!

Daniel

3 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

If you're talking about native CSS grids, according to Can I Use, grid is mostly unsupported by current browsers, but flexbox has had nearly universal support for a while now. In this case, flexbox is the hands-down choice, for sure.

On the other hand, since you mentioned Bourbon Neat, you're probably talking about the kinds of grids often implemented by frameworks such as Bootstrap. In this case, I think it would be mostly a matter of whether you intended to use the other features offered by the framework. If you do want the other framework features, go with the framework. But if you are only interested in layout, I'd go for flexbox since it's native CSS and doesn't require any 3rd-party stylesheets.

Brian Steele
Brian Steele
23,060 Points
Brian Steele
Brian Steele
23,060 Points

Hmmm, I think Bourbon Neat is similar to a Bootstrap grid, but developed with Sass, so the supported/unsupported thing won't be an issue. Flexbox is great, I'd recommend that with the caveat that there are some definite IE bugs. If you can work on some fallbacks for where IE is problematic (and depending on your implementation of Flex, this may not be an issue). The great thing about Flexbox is it has been developed for layout and solves a lot of problematic issues in a really simple/clean way (think vertical alignment, spacing, etc...)

johnd3
johnd3
8,860 Points
johnd3
johnd3
8,860 Points

Thanks Brian and Steven! Really helpful :)