The CSS Grid Layout is a two-dimensional grid-based layout module formed by rows and columns..
The vertical line of grid items are columns.
The horizontal line of grid items are rows.
To divide a grid you will need to adjust the "Grid Layout" (with yellow border) using Flex Section.
Gap in CSS Grid is used to define the space between rows (Row Gap) and columns (Column Gap) in a grid.
Note: These properties allow you to set the visual separation between elements in the grid, which makes the layout and readability of the content easier.
For example:
Flex Box Item
(Flexsection > Grid > Flex Box)
Grid layout properties affect the behavior of elements inside the Flex box.
Flex Direction: controls the direction in which elements align within a flexible container. It determines whether the elements will be aligned in a row, in a column, or in other arrangements.
Although flexbox and grid share CSS style properties, grid is suitable for a wide variety of scenarios and layouts where the arrangement of elements in rows and columns is essential. Some them include: Image Grid, Blog and Articles, Data Tables, Forms, Control Panels, etc.