CSS Grid vs Flexbox - What is the difference?

The internet is made up of over 1.7 Billion web pages with different page layouts. Technology nowadays is responsive to any screen orientation or dimension of the screen in our devices. Making page layout comes in handy with the use of Cascading Style Sheet also refers to as CSS. CSS is one of the cornerstones of the web. More like the flesh covering the bones of the body. It is easy to understand and there are lots of resources available on how to use this amazing piece of technology.

So how is this related to our topic?

CSS is use to design layout and the appearance of those web pages but creating multi-layouts is a huddle for beginners who intend to create project with that feature.
To solve these complications, Devs invented proper responsive layout models available natively in the browser, out of which - Flexbox, CSS Grid and Bootstrap became most popular and are widely supported across all platforms & browsers.
I will try to strike the difference between CSS Grid and Flexbox fundamentals and probably when to use which layout.

1. CSS Grid: This 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.
   To get started you have to define a container element as a grid with display:grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

2. 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;

What is the line of divide between these two?

a. CSS Grid Layout is of two-dimensional , that means it can handle columns and rows, not like flexbox that is basically a one-dimensional.
b. A core distinction between CSS Grid and Flexbox is their approach — CSS Grid’s
approach is layout-first whereas Flexbox’ approach is content-first.
c. The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.
d. CSS Grid deploys fractional measure units for grid fluidity and auto-keyword functionality to automatically adjust columns or rows.