Grid & Flex :

Grid flexb Grid:
CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning.
Like tables, grid layout allow us to align elements into columns and rows.

Flexbox:
The CSS Flexbox offers a one-dimensional layout.
It is helpful in allocating and aligning the space among items in a container (made of grids).
It works with all kinds of display devices and screen sizes.
To get started you have to define a container element as a grid with display: flex;

One Vs Two Dimension:

Grid is made for two-dimensional layout while Flexbox is for one.
This means Flexbox can work on either row or columns at a time, but Grids can work on both.
Flexbox, gives you more flexibility while working on either element (row or column).
HTML markup and CSS will be easy to manage in this type of scenario.
GRID gives you more flexibility to move around the blocks irrespective of your HTML markup.

Difference Between Grid and Flexbox:
flex-direction: specifies the direction of the main axis along which flex items are laid out. It can be set to row (default), row-reverse, column, or column-reverse.
justify-content: aligns the flex items along the main axis. It can be set to flex-start (default), flex-end, center, space-between, space-around, or space-evenly.
align-items: aligns the flex items along the cross axis. It can be set to stretch (default), flex-start, flex-end, center, baseline, or initial.
flex-wrap: determines whether the flex items should wrap to multiple lines if there is not enough space in the container. It can be set to nowrap (default), wrap, or wrap-reverse.
flex: shorthand property for setting the flex-grow, flex-shrink, and flex-basis properties of a flex item.