Flexbox vs Grid?
Options
- Flexbox is two-dimensional; Grid is one-dimensional
- Flexbox is one-dimensional; Grid is two-dimensional (Correct option)
- They are identical in the layouts they create
- Grid only works with table elements in the DOM
Answer
Flexbox lays out in one dimension (row or column); Grid controls rows and columns together
Why
Flexbox arranges items along ONE direction, a row or a column, and is great for toolbars, nav bars and centering things.
Grid arranges items in rows AND columns at the same time, great for page layouts and card galleries.
They are often combined: a Grid page layout with Flexbox inside each card.
Remember
Flexbox = one direction. Grid = two directions.