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.
Grid Parent Properties
Display:
This is a basic property in the grid if we apply a grid in a container then we must use display:grid.
Grid-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;
Grid-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.}
Gap:
It will set some gap(margin) between column and row.
Ex- gap: 10px 20px; /row-gap column-gap/
Justify-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.
Align-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.
Justify-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.
Align-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.
Grid Child Properties:
grid-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.
Grid-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.