Grid and Flexboxt

To create beautiful layouts one must master the concepts of grids and flex-box

Gridst

• Grid Columns: number of columns of the grid
• Grid Rows: number of rows of the grid
• Gap: space between the grid items

Flexboxt

Flex Directiont

• flex-row: distribute items in a row direction, consecutive elements will be presented in a horizontal order
• flex-row-reverse: same as flex-row, but with the items sorted in a descending order
• flex-col: distribute items in a column direction, consecutive elements will be presented in a vertically order
• flex-col-reverse: same as flex-col, but with the items sorted in a descending order

Align Itemst

• items-start
• items-center
• items-end
• items-stretch

Justify Contentt

• justify-start
• justify-center
• justify-end
• justify-between