grid-template-column - This defines the width and number of columns.

grid-template-rows - This defines the height and number of rows.

grid-gap - This defines the space between columns and rows.

repeat() - This can be used if you don’t want to write columns and rows.

fr means 1 fraction of the space for rows and columns.

grid-template-areas - This is used to make layouts via alphabets. Specify the alphabets as per columns and then use grid area in every header footer etc. Use dot for blank space.

auto-fit - This is used to fit columns and rows as per the screen size. This is used while defining a number of rows which means grid-template-rows, grid-template-columns.

min-max - Minimum width/height of the column rows.

implicit rows - This is used when you want all the rows of the same height and width. grid-auto-rows: 100px; After using this you can erase grid-template-rows.

grid-auto-flow: dense - This is used for filling the cell space with smaller images.

grid-column - This is used to make an image occupy space horizontally

grid-row - This is used to make an image occupy space vertically.

justify-content - controls content along rows.

align-content - controls content along columns.

align-self and justify-self - This is used to align or justify only specific elements.

auto-fit - Fills the elements as per the screen.

auto-fills - Fills the elements but keeps adding new columns and blank spaces as the elements get over.