The CSS Grid Layout is a two-dimensional grid-based layout module formed by rows and columns..
...
None:
...
Wrap: (default)
...
Reverse:
...
Align Self: is used to control the vertical alignment of a specific flexible element within a flexible container.
Top:
...
Middle: (default)
...
Bottom:
...
Baseline: It aligns according to the baseline of its conten.
...
Stretch:
...
Justify Self: It controls the horizontal alignment of a specific flexible element within a flexible container.
Left:
...
Center:
...
Right:
...
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.