RE: [css-grid-layout] Relationship with Flexbox

> Could someone provide a quick comparison in simple terms? When would a 
> web developer use Grid Layout vs Flexbox? 
> 
> -- @simevidas

CSS Flexbox is more advanced toward the implementation path than CSS Grid. So, in the short term, CSS Flexbox would be your best option whatever the use case (execpt maybe display: table in some cases).

This put aside, CSS Grid can be seen as a superset of CSS Flexbox: it gives you much more freedom in the way you layout elements (and this is even more true with the new line-naming model). For example, you can mix a fixed amount of specialized columns while using a variable amount of repeated columns, depending on the browser's rendering area size.


As a basic rule of thumb, use Flexbox if you have one type of item to align and can define rougly define the alignement as a justified flow of inline-block elements, like this: 

   A  B  C

or

   AAAAA
   
   BBBBB
   
   CCCCC

or

   A B C
   D E F
   G H


If you need something more complex (for example, you may want to reorder elements from the left column of your blog on small screens:

   hhhhh
   mcccc
   mcccc
   mcccc

into

   hhm
   ccc
   ccc


Best regards,
François

Received on Monday, 6 May 2013 17:08:17 UTC