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 CSS Layout Techniques Grid Layout Understanding Grids

Posted by tian jin
tian jin
Courses Plus Student 5,162 Points

grid and flex looks similar, what's their difference?

and on which situation should we use them respectively?

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi 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
tian jin
Courses Plus Student 5,162 Points

Thanks Graig, that's helpful!

Robin Malhotra
Robin Malhotra
14,883 Points
Robin Malhotra
Robin Malhotra
14,883 Points

So, grids are like a more browser wide compatible version of flexboxes?

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi 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