Basic Concept Used in Portfolio

1. Flex: It is used to control the initial size of flex items. (className="basis-..." helps to give a size of the flex.) -"flex-row" helps to position items horizontally. -"flex-row-reverse" helps to position items horizontally from the right side. -"flex-col" helps to position items vertically. -"flex-col-reverse" helps to position items vertically but from down to up. ="flex-wrap" helps to wrap the items. -"flex-nowrap" helps to prevent from colliding or overlapping two or more flex.

2. Grid: It helps to create a box. -"grid-cols-2" means it forms two boxes by dividing the page from the center -"grid-cols-...." means it creates grids with n equally sized columns. -"Gap" helps to make a space between grids. -"col-span-2" means it takes two columns as a single grid.

-"grid-rows-2" means it forms two rows of grids. -"grid-rows-..." means it forms n rows of grids.

3. Justify: It helps to position items, buttons, and flex along the main axis.