Flexbox:

1. Flexbox a 1-dimensional system, meaning it can handle in rows.
   Example
   Home About us Gallery --------------->(Header)

2. Main motive to alter width and height to best fill the available space

3. More focus on content rather than layout

4. Use for small scale, fundamentally to display linear.

CSS Grid:

1. CSS Grid is a 2-dimensional system, meaning it can handle both columns and rows
   Example
   Header
   Body
   Footer

2. Layout allows us to align components into columns and rows

3. Approach mainly focus on Layout other than content

4. Grid is used for large scale where there no linear display