CSS GRID -A TWO DIMENSIONAL LAYOUT --->

INRODUCTION :

CSS GRID LAYOUT IS A TWO DIMENSIONAL LATOUT AS COMPARED TO THE FLEX WHICH WAS A ONE DIMENSIONAL LAYOUT SYSTEM. GRID PROPERTY IN CSS WAS INTRODUCED TO SOLVE THE LAYOUT PROBMLEM IN WB PAGES.BY DEFAULT THE GRID PROPERTY IN CSS BEHAVES SIMILAR TO ITS PROPERTIES OF ROWS AND COLUMNS.

To get started with the grid property in CSS we have to set a parent element as a grid with the property display :grid and the set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row. Now let us start with the practical approach of learning CSS GRID LAYOUT.

GRID-TEMPLATE-COLUMNS :

In the above case first 3 columns are created with a size of 100px then we have applied the CSS grid property means display :grid and then by the grid template column property we have repeated the columns 3 times each of 100px and the property was grid- template- columns :repeat(3,100px).Inside the bracket the column was repeated 3times each of 100px.

GRID-TEMPLATE-COLUMN-START :

This is used to specify from which column the item should start. It states that from column line the item will start.

Here 5 boxes are created and id named with box10 has been given the property grid column start : span 2 means it will start from column1 to column 2

GRID-TEMPLATE-COLUMN-END :

This is used to specify at which column the item should end. It states that from column it will stop displaying the items or for how many columns the item will span.

Here 5 boxes are created and id named with box20 has been given the property grid column end : span 2 means it will span and ends in column 2

GRID-TEMPLATE-ROWS :

The grid-template-rows property specifies the number of the rows in a grid layout.

In the above example we have 3 boxes and one in each row and each box occupies the whole container width as we have not specified number of columns. The property which is applied to class3 is grid-template-rows : 1fr 1fr 1fr;

GRID-TEMPLATE-ROW-START :

This is used to specify from which row the item should start.

In the above example we have 3 boxes and one in each row and each box occupies the whole container width as we have not specified number of columns. The property which is applied id box30 is GRID-TEMPLATE-ROW-start:2 so box 2 is appearing first means the row will start from box2.

GRID-TEMPLATE-ROW-END :

This is used to specify at which row the item should end.

In the above example we have 3 boxes and one in each row and each box occupies the whole container width as we have not specified number of columns. The property which is applied id box40 is GRID-TEMPLATE-ROW-end:3 so box 3 is appearing last means the row will end at box2.

GRID-AUTO-ROWS :

The CSS grid auto rows property describes about the size of the row content. Or in other words this property sets the size of the rows in which their properties are not clearly described and any other rows in which their properties are described but it can be clearly sized by the grid template rows property.

Here in the child class the grid auto rows property is set to 150px.

GRID-TEMPLATE-ROWS-MINMAX :

If large content of grid items are added but grid sizes are defined then the content overflow will take place the it can be controlled by grid template rows minmax property.

Here in the class named child the grid template rows minmax property is set so we can see in the second box all the contents are arranged properly.

GAPS BETWEEN ROWS AND COLUMNS :

COLUMN GAP :

Here in this case a column gap of 30px is given.

ROW GAP :

Here in this case a row gap of 30px is given.

BOTH ROW AND COLUMN GAP :

Here in this case a row gap and column gap of 30px are given.

GRID TEMPLATE AREAS :

This is one of the most important property in CSS GRID. With this property we can define the navbar main bar the hero section header footer. According to this property both rows and columns must be equal.