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 trialtian jin
Courses Plus Student 5,162 Pointsgrid and flex looks similar, what's their difference?
and on which situation should we use them respectively?
1 Answer
Craig Watson
27,930 PointsHi Tian,
To try and explain a little about the difference from my experience is more about the coding than anything else as the end results are pretty similar in respect to its responsive capabilities.
However at the moment even with all the extra prefixing needed i find myself turning to flex for small projects as its simplicity and flexibility is great here have a read of this. The code is simple and very effective with some well thought through wrapper div's.
The grid systems are well in place in the web design and development community already but that doesn't mean to say that over the coming years as browser support and developer knowledge increases we wont see more sites built with flex box.
To give some good advice I would say stick with a fluid grid for now but keep one eye on the development of flex as its certainly looking to be a powerful tool. I personally love it and its come a long way to reducing coding of a responsive grid.
Hope this helps Craig
tian jin
Courses Plus Student 5,162 Pointstian jin
Courses Plus Student 5,162 PointsThanks Graig, that's helpful!
Robin Malhotra
14,883 PointsRobin Malhotra
14,883 PointsSo, grids are like a more browser wide compatible version of flexboxes?
Craig Watson
27,930 PointsCraig Watson
27,930 PointsHi Robin,
A grid system has to be made by defining classes in your CSS with specific properties and values and then them classes can be added to the HTML to space out your layout. It is a little more complicated than that explanation so I have found this link which explains thing a little better.
Flexbox on the other hand is something completely different, it is used just like adding any other CSS property and value as it is a built in CSS feature. Since I posted the above answer, it is now fully compatible with all modern browsers!
Here is a full course on flexbox you wont get much more info anywhere else.
Hope this helps! Craig