4

What are the differences between the flexbox and grid systems? Under which circumstances should I use each system?

TylerH
  • 20,816
  • 57
  • 73
  • 92
Kalo Heem
  • 79
  • 1
  • 3
  • 2
    Read [Flexbox vs CSS Grid real world example](https://stackoverflow.com/q/44586691/4642212). – Sebastian Simon Apr 30 '18 at 05:44
  • in short flex is 1 dimentional whereas grid is 2 dimentional. I wrote an article [here](https://dioxmio.medium.com/grid-vs-flexbox-which-one-should-you-be-using-471cb955d3b5) exploring the use cases for each if you are interested in knowing more – Jose Greinch Dec 25 '20 at 14:59

2 Answers2

12

Difference between Grid And Flexbox

  • Flexbox best for one dimensional Layout(like Row or Column)
  • CSS grid best for 2D layout (Row and Column)
  • Flexbox One Dimension ex:enter image description here
  • CSS Grid 2D ex:enter image description here
  • Grid can do things Flexbox can't do, Flexbox can do things Grid can't do.
  • They can work together: a grid item can be a flexbox container. A flex item can be a grid container.

  • With CSS Grid we can set relationships horizontally and vertically but at the same time. Flexbox, on the other hand, is stuck doing either vertical or horizontal layouts.

    Further Read

Momin
  • 2,872
  • 3
  • 29
  • 41
3

Flexbox is 1-dimensional and enables all its direct children (‘flex items’) to sit along its main defined axis and context can potentially change if width isn’t already defined.

Whereas, CSS grids are designed to be a 2-dimensional layout system: CSS Grids can handle both columns and rows.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

tyvm123
  • 189
  • 2
  • 8