Grid is a two dimensional layout , which is used for styling purposes in a webpage . A lot of people confuse flex and grid but flex is used for single dimensional, grid gives us more control on our webpage because grid divides a page into row and column and we can fix the width and height of these columns and rows.We have some parent and child property in grid.

PermalinkGrid Parent Properties

PermalinkDisplay:

This is a basic property in the grid if we apply a grid in a container then we must use display:grid.

PermalinkGrid-template-column:

With the help of this property we can define the width of columns. We can use %,px and fr to define the width of columns. Ex-grid-template-column:100px 100px;

PermalinkGrid-template-row:

It is similar to grid-template-column, in which we define the width and height of rows. Ex-grid-template-row:100px 100px;

*We can also use repete() function to set the width and height of rows and columns. Ex-grid-template-column:repete(3,1fr); {It will create three columns with the same width.}

PermalinkGap:

It will set some gap(margin) between column and row.
Ex- gap: 10px 20px; /row-gap column-gap/

PermalinkJustify-items:

It will palace items in different positions in a cell.It works horizontally in the grid. Like-center,left,right,bottom etc. We have some values to do this work.

• Start-it will align items to their starting edge of their cell.
• End-it will align items to their ending edge of their cell.
• Center-it align in the center.
• Stretch-it will occupy the full width of the cell.

PermalinkAlign-items:

It will place items in a vertical direction in the grid. We also have some values in it.

• Stretch-it will fill the whole height in the cell.
• Start- it aligns items in the starting edge of their cell.
• End-it will align in the ending edge of their cell.
• Center- it aligns in the center.

PermalinkJustify-content:

Whenever your grid size is less than your grid-container , then this property will adjust your grid in the grid-container. We have some values to do this work.Justify-content works horizontally.

• Start-it align your grid with the starting edge of the grid-container .
• end-it align your grid with the ending edge of the grid-container .
• Center-it will center your grid.
• Space-between-it gives space between your grid-columns.
• space-around-it gives space around your grid-columns.
• Space-evenly-it distributes space equally between grid-columns.

PermalinkAlign-content:

When your grid-container size is more than your grid then this property will help you to align content in the grid-container. This property works in a vertical direction.We also have some value to align the content in the grid-container.

• start-it align your grid with the starting edge of the grid-container .
• end-it align your grid with the ending edge of the grid-container .
• Center-it will center your grid(vertically).
• Space-between-it gives space between your grid-rows.
• space-around-it gives space around your grid-rows.
• Space-evenly-it distributes space equally between grid-rows.

PermalinkGrid Child Properties:

Permalinkgrid-column-start:

It will help you to position your cell in the grid. It changes the cell position by column.This denotes where the cell will start.

PermalinkGrid-column-end:

It denotes where the cell ends.

We also stretch cells in the row with the help of grid-row-start,grid-row-end.