Flex just dictates the position of the item on the axis, which is a one-dimensional layout, whereas Grid, because it divides the container into “rows” and “columns”, generates cells, and then specifies the cells that the item resides in, which is a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.

Flex: There are two axes in the Flex container, horizontal and vertical, and each element in the container is called a Flex Item.

There are six properties that can be set on the container: - flex-direction spindle direction - flex-wrap Wrap out of range - flex-flow The compound property of flex-direction and flex-wrap - justify-content The alignment of the element in the spindle - Note: When the Flex layout is set, the float, clear, and vertical-align attributes of child elements are invalidated. Flex has six attributes available on items: 4. Shrink flex-item 5. Shrink flex-item 5. 6. Align -self specifies the alignment of flex-item on its ownCopy the code

Grid: Like a table, a Grid layout lets you align elements by row or column. However, CSS grids are probably still easier to lay out than CSS tables. For example, the child elements of a grid container can position themselves so that they are truly overlapping and hierarchical like CSS positioned elements.