What is the CSS Grid Layout?
CSS Grid layouts are fundamental to the design of websites, and the module is the most powerful and easiest tool for creating it. Thus, Grid Layout gives us a method of creating grid structures that is described in CSS.
What about, Flex?
The Flex Box module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown/dynamic.
The main difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension either a row or a column, on the other hand, Grid was designed for two-dimensional layout rows, and columns at the same time.
Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.