Grid Layout

 short code of visual studio:

.item{item -$}*20 

Grid Layout:

1. grid work 2 dimensions. Horizontal and Vertical.

2. display: grid (That is the default). If we add another CSS property like "grid-template-columns" that grid will work. otherwise, the grid properly will not work.

3. grid-template-columns: 200px; that means 1 column and width 200px.

4. grid-template-columns: 200px 100px; that means 1 column with 200px width  and 2nd column with 100px width 

5. grid-template-columns: repeat(); here repeat is function. 2 values we have to add in that repeat. otherwise, that repeat will not work.

6. grid-template-columns: repeat(2, 200px); that mean 2 time repeat and those 2 column will 200px width.

7. grid-template-columns: repeat(2, 200px) 100px; that mean 2 time repeat and 1st 2 columns will with 200px width and after that 100px one column will create. 

8. grid-template-columns: repeat(2, 200px) 100px 150px; that mean 2 time repeat and 1st 2 columns will with 200px width and after that 100px one column will create and after that 150px one column will create.

9. grid-template-columns: repeat(3, 1fr); that means 3-time repeat and all space will equal divide by that 3 columns. 

10. grid-template-columns: repeat(3, 1fr) 2fr; that means 3-time repeat and all space will equal divide by that 3 columns and after that 2fr space will take. if 1fr take 200px that mean 2fr will take 400px. 

11. grid-template-columns: 200px auto 100px; that means 1 column with 200px width and 3rd column with 200px width and the rest of all space will take at middle auto. 

Fr is a fractional unit and 1fr is for 1 part of the available space.

Grid properties:

1. parent properties

1. grid-template-rows
2. grid-template
3. column-gap
4. row-gap
5. grid-gap
6. justify-items
7. align-items
8. justify-content
9. align-content
10. place-items
11. place-content

 2. child properties:

1. grid-column: start/end
2. grid-row: start/end
3. justify-self
4. align-self
5. place-self