All about display: grid ; property in CSS

 Grid entire topic in one glance

-> Grid is similar to row and column layout

-> column is what gives the structure first

-> just like flex, grid works in a parent child relationship, so there is grid-container and grid-item.

-> The grid-container:

1) Here gl refers to grid lines.

2) The no. of grid lines is always 1 more than the no. of rows and columns. In the example the no. of row is 3 and the no. of row grid line is 3+1= 4 , and the no. of column is 4 and the no. of column grid line is 4+1 = 5.

3) The gap between 2 grid items which is across grid lines is called grid-gap.

1) grid-template-columns: property, the property to give columns to the grid.

CASE 1) grid-template-column: auto auto;

1)  grid-template-columns: auto auto; will create two columns

2) auto value mean adjust automatically. 

CASE 2) grid-template-columns: auto auto auto auto;

1) grid-template-columns: auto auto auto auto; will create 4 columns.

CASE 3) grid-template-columns: 30% 40% 40%

1) grid-template-columns: 30% 40% 40%; will create 3 columns , first one will be 30% of the container width and second & third one will be 40% each of the parent container width.

CASE 4) grid-template-columns: 30% 40% 40% 20%; and children are overflowing by 30% extra.

1) firsts thing first one more column is there but I could not click the entire screenshot.

2) so there will be 4 columns. 1st column will have 30% width , 2nd will have 40% width, 3rd will have 40% width and the final one will have 20% width.

3) since 30+40+40+20 = 130% , which is more than the parent container by 30% , so the last child is overflowing out of the parent containers' width and we can see the parents' background-colour ( dark-green).

CASE 5)instead of display: grid; we will use display: inline-grid;

***please ignore child 7 here in the HTML document, it's till child 6 only.

1) we have 2 columns one with width of 300px and the 2nd one with width of 200px and because we have used inline-grid, the child does not overflow and the parent will wrap the child as much as the child is taking the area.

2) grid-template-row: property , the property to give rows to the grid.

Just like grid columns , we can create grid rows by using the property: 

grid-template-rows:

Now we have 3 columns and 4 rows and 1st row has an area of 80px, 2nd row 40px, 3rd row 100px and the 4th row 70px, as mentioned in the property: grid-template-row:

3) grid-column-start: & grid-row-start: property.

We can mention where we want our grid column and grid row to start by using these properties. Both the properties will accept numeric value and the numeric value represents column grid line and row grid line respectively .

Here in child#1 we have given the value=> grid-column-start : 2; which means the column of child#1 will start from column grid line 2. 

grid-row-start: 4; which means the row of  child#1 will start from row grid line 4.

Analyse the output clearly and slowly, taking each step in at the time, because it is confusing and is difficult to understand at first glance.

4) grid-column-end: & grid-row-end: property.

Just like how we can mention where our columns and rows can start by using the above properties, we can also mention where it will end by using these properties.

These properties will also take numbers as their values.

Child#1's column will start at column line 2 and end at line 4

And

row will start at row line 4 and end at line 5.

Like I said analyse it slowly multiple times, you'll get it and most importantly practice and revise.

Another example: of grid-column-start/end: and grid-row-start/end: property

REVISION OF ALL THE grid properties learnt till now:

1) grid-template-column: 30% 40% 30%

=> there will be 3 columns with these values as their area.

2) grid-template-rows: 80px 40px 100px 70px

=> 4 rows with these values as the row area

3) In child#1 grid-column-start and end: 3 and 4 respectively

=> child#1's column will start from column line 3 and end at column line 4 respectively.

4) In child#1 grid-row-start and end: 2 and 4 respectively

=> child#1's row will start from row line 2 and end at row line 4 respectively.

**as always analyse the output slowly multiple times and try it yourself too.

5) grid-column: and grid-row: shorthand of the above 2 properties.

These are shorthand properties of the above 2 properties discussed earlier.

Concept of span: literally really easy, you'll get it in one glance, it is same like colspan and rowspan attribute of the table tag in HTML.

column of child#1 will start from column line 2 and will span only 1 column.

row of child#1 will start from row line 2 and will span 2 rows ( it is spanning in  2nd and 3rd rows respectively).

Another example: of the span example.

6) grid-area: the short-hand of all the start and end property.

It's value should be in this order:

1)row-start

2)column-start

3)row-end

4)column-end

Child#1's row will start from row line 2.

Child#1's column will start from column line 1.

Child#1's row will end at row line 4.

Child#1's column will end at column line 4.

Another example: of grid-area: property with span values.

7) column-gap: & row-gap: property

this property is used to give gaps between the columns and rows of the grid.

Output: columns have 20px gap between them And rows have 10px gap between them.

8) grip-gap: short-hand of the column-gap: and row-gap: property

The order in which this short-hand property will work is as follows:

1) row-gap

2) column-gap

The output is very evident just by looking. Spend some time on it.