CSS GRID

1. display : grid;

    To basically create a particular HTML container into an grid. or to initialize the grid. 

2. grid-template-columns : 300px 100px 100px;

To define the columns in every single row. 

The above commands create Three column in a row first having width of 300px , secound having width of 100px , third having width of 100px 

3. grid- template-columns: 300px 100px 100px; 

This commands basically define the column of the row first two row are fixed width as given 300px and 100px Rest of the space present in  the column is filled by 3rd row because we provide it width Auto 

4. grid-template-columns : 1fr 4fr 1fr; 

this command basically divide our columns in  equal number of fraction and allocate the space to our number of fraction provided to it. 

In above command 1st row contain 1fr space and contain 4fr and 3rd contain again 1fr. 

5. grid-template-columns : repeat(4, auto);

this command basically divide our column in 4 row and auto width we can replace both the row's and the width with any number we want to build our layout. 

6. grid-gap: 2rem;

It basically used to create the gap between the row and column present inside the grid layout.

7. grid-template-rows : 1fr 1fr 4fr; 

This command basically work on Row's they divide our Rows in fraction's dependent on first row if first row is of  2fr rest of the rows are the multiple of the fraction present in the first row.

8. grid-auto-rows: 2fr;

This commands basically divide all the rows automatically in 2fr except already define row's.

9. grid-column : 1/span 4;

This will merge the first 4 column of already define grid. we can replace 1 and 4 with any number we required according to the situation.

10. grid-row: 1/span 4;

This will merge the first 4 row of already defined grid. we can replace 1 and 4 with any number we required according to the situation.

11. grid-template-columns: repeat(auto-fit, minmax(300px , 1fr))

This command will repeat the defined block of the website and the minimum width of the block is 300px and maximum is depend on the fraction you provided to the single block on the screen.as in above command i provided the 1fr as the fraction of the screen you can provide it according to the demand

12. grid-template-areas:

                                'A A A'

                                'B B C'

                                'C C C'

In this basically we need to create 2D matrix in which every number of row contain equal number of column. and in the place of A, B & C we can use whatever we want to put inside the frame of the template