CSS Flex box vs Grid

Hi, if we like to implement new features of css like flex-box or grid, we need to understand the main differences between each one. 

Also if you are asked yourself about which is better, then this post is for you. 

This image show us the different dimensions, we will focus in 1 and 2 dimension. 

Well, we need to know that the W3 says:

CSS Flexbox

  • CSS Flexbox works in one dimension and Css grid works in two dimensions. 
  • CSS Flexbox focuses in content flow Widths (or heights) of flex items are determined by the content of the item. 
  • CSS Flexbox handle the items in the horizontal or the vertical axis (row-based or a column-based layout).
  • You can set widths and heights to the flex items or also use the calc() method but then we will lose the main function of flexbox, that is handle this part.
  • W3 says that “gains a powerful tools for distributing space and aligning content  distributing space and aligning content”, this means that CSS Flexbox help us to allocate space and align items flexibly.

CSS Grid

  • CSS Grid handle the items in two axes: horizontally and vertically (place grid items into cells defined by rows and columns.)
  • CSS Grid focuses on placing content, this means that each item is a grid cell lined up in the horizontal and vertical axis (CSS Grid is good in case of you want to control the position of items within a layout).
  • CSS Grid is good if we want a precise calculation in our layout ( grid-template-rows, grid-template-columns or fraction unit).
  • CSS Grid is also good for layouts like broken, asymmetrical, and overlapping.
  • CSS Grid help us to create responsive layouts without using media queries.

Note: Do not forget that we can create two-dimensional layouts with flexbox and one-dimensional layout with CSS grid, by the nature of each.