CSS grid

hello friend today we are going to learn about CSS grid.

CSS grid is a methodology of laying out the elements of a web page in two dimensional manner.

in order to get started with the grid we have to set display of the parent element of the item to which we want to apply the properties of the grid into grid.

there are two main categories of grid properties which can be applied to grid they are parent-properties and child-properties.

The parent-properties

grid-template: grid template defines the rows and columns of the grid .

example: grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
or
grid-template: 1fr 1fr 1fr(grid-template-columns)/1fr 1fr
1fr(vice-versa)

as seen in the above example it creates a grid of 3 rows and 3 columns.

result:

align-content: justifies all the contents of the grid to column axis if the total grid size is smaller than container.

code:
.container{
display: grid;
border: 2px solid red;
height: 600px;
grid-template: 150px 150px 150px/ 150px 150px 150px ;

align-content: center;
}
.box{
height: 100px;
width: 100px;
margin: 10px;
border: 2px solid black;
}

result:

the other values of the align-content are start, end, space-between, space-evenly and space-around

justify-content:justifies all the contents of the grid to row axis if the total grid size is smaller than container.

code:
.container{
display: grid;
border: 2px solid red;
height: 600px;
grid-template: 150px 150px 150px/ 150px 150px 150px ;
justify-content: end;
}
.box{
height: 100px;
width: 100px;
margin: 10px;
border: 2px solid black;
}

result:

other values of justify-content includes start, center, space-evenly, space-around, space-between.

align-items: defines alignment of grid items along the column axis.

justify-items: defines alignment of grid items along the row axis.

code:
.container{
display: grid;
height: 600px;
grid-template: 150px 150px 150px/ 150px 150px 150px ;

align-items: center;
justify-items: center;
gap: 10px;
}

result:

other values include end, start and stretch align-items includes an additional property of baseline

the child-properties

align-self: aligns the item of a single-cell along column axis
justify-self: aligns the item of a single cell along row axis

code:

    .container{
        display: grid;
        height: 600px;
        grid-template: 150px 150px 150px/ 150px 150px 150px ;  
        gap: 10px; 
    }
    .box{
        height: 100px;
        width: 100px;
        margin: 10px;
        border: 2px solid black;
    }

    #box-2{
      align-self: end;
      justify-self: center;
    }

result:

the other value include start also.

grid-column: determines the item's location based on a start and an end column lines (or a span).

grid-row:same but for rows.

code:
#box-2{

      grid-column-start: 2;
      grid-column-end: 4;
      /* or */
      /* grid-column: 2/4; */
      grid-row-start: 1;
      grid-row-end: 3;
      /* or */
      /* grid-row: 1/3 ; */
    }

result: