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

On Mon, May 6, 2013 at 5:08 AM, Šime Vidas <sime.vidas@gmail.com> wrote:
> Could someone provide a quick comparison in simple terms? When would a web
> developer use Grid Layout vs Flexbox?

Flexbox is for one-dimensional layouts - anything that needs to be
laid out in a straight line (or in a broken line, which would be a
single straight line if they were joined back together).

Grid is for two-dimensional layouts.  It can be used as a low-powered
flexbox substitute (we're trying to make sure that a single-column/row
grid acts very similar to a flexbox), but that's not using its full
power.

Flexbox is appropriate for many layouts, and a lot of "page component"
elements, as most of them are fundamentally linear.  Grid is
appropriate for overall page layout, and for complicated page
components which aren't linear in their design.

The two can be composed arbitrarily, so once they're both widely
supported, I believe most pages will be composed of an outer grid for
the overall layout, a mix of nested flexboxes and grid for the
components of the page, and finally block/inline/table layout at the
"leaves" of the page, where the text and content live.

~TJ

Received on Monday, 6 May 2013 16:58:14 UTC