CSS grid
Tags: css, webdev
Published: 2023-01-04 07:36:45

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3nm4b6qfkbm6pj5b693.png)

**_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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09f6bv53ae0iki10ajgn.png)

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: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lswl4si9u6lj5i1tulha.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2ceix0p0fksy3dnjo9n.png)

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: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4lmyxml02jovlc9h6jr.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b2xdbbhztbcgrj6nwrr.png)