...
Once converted to a flexible container the properties within the grid layout control the direction and size of flow of elements.
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.
...
Flex Column/Column Reverse:
...
Justify Content: is used to horizontally align flexible elements within a flexible container.
Flex-start: (default)
...
Center:
...
Flex-end:
...
Space-between:
...
Space-around:
...
Space-Evenly:
...
In addition to turning the grid layout into a flex container, we can add inside the grid areas (with pink border) a widget called "Inner Flex Box".
...