What is Grid?

Grid is a CSS layout property, where you can set rows and columns to place your content as per requirement. Grid gives you total control over setting rows and columns and placing your content in a particular cell in the grid.

In the above image, you can see, the grid gives you precise control over the placement of your content.

How to set up Grid?

To set up the grid we need to give no of rows and no of columns. Let's see the following example...

The CSS syntax is as follows,

.container{
    display: grid;
    grid-template-columns: 100px 75px 120px 80px;
    grid-template-rows: 50px 40px 60px;
    row-gap: 10px;
    column-gap:10px;
}

Let's see each property in detail

1. display: grid:- To make the parent container grid.

2. grid-template-columns:-To set the required no of columns with their width.

3. grid-template-rows:-To set the required no of rows with their height.

4. column-gap:- To set the gap between columns.

5. row-gap: To set the gap between rows.

The above properties will be explained in detail in the following section. One this to notice here the content is automatically placed in the grid.

Grid-template

grid-template is the short-hand property for grid template rows and grid template columns.

grid-template: grid-template-rows(<no of rows>)/grid-template-columns(<no of columns>)

grid-template-columns

This property is used to set the columns with the desired width.

.container{
    display: grid;
    /* 3-columns with width in px*/
    grid-template-columns:100px 50px 120px;
    /* 4-colums with width in percentage */
    grid-template-columns:25% 25% 25% 25%;
    /* 4-columns useing width as fr unit and repeat function */
    grid-template-columns:repeat(4,20%);
}

repeat function

repeat(no.of columns, pattern or width)

To create a large no of columns or rows this function is used. This function will repeat the given pattern.

.container{
    display:grid;
    /* this will crate columns 50px 60px 50px 60px */
    grid-template-columns:repeat(2, 50px 60px);
}

fr unit

This uinte mostly used in the grid. The fr unite divide the available space in mentioned number and make columns with that width.

grid-template-columns: 1fr 3fr;

This will first column with 1/4 space and the second row with 3/4 space.

grid-templates-rows

This property is used to set the rows with the desired height

.container{
    display: grid;
    /* 3-rows with height in px*/
    grid-template-rows:100px 50px 120px;
    /* 4-rows with height in percentage */
    grid-template-rows:25% 25% 25% 25%;
    /* 4-rows useing height as fr unit and repeat function */
    grid-template-rows:repeat(4,20%);
}

Now we will use the grid-template property as follows

.container{
    display: grid;
    grid-template:repeat(3,50px)/repeat(4,100px);
}

In the above property, we created 3 rows with a height of 50px and 4 columns with a width of 100px. The repeat function is explained below

Gap

• The gap is a shorthand property for row-gap and column-gap

• gap: <row gap>/ <column gap>: 10px/20px; 10px for row 20px for column.

• gap: 10px: it will be applied for rows and columns.

Grid-template-areas

This property helps you to convert your webpage from the left side to the right side easily.

We know how our web page should look (right side). That layout we will mention using grid-template-areas. see following code

grid-template-areas:
    "hd  hd hd hd"
    "nav mn mn sb"
    "ft  ft ft ft"
    ;
.header{
    grid-area: hd;
}
.sidebar{
    grid-area: sb;    
}
.footer{
    grid-area: ft;    
}
.navbar{
    grid-area: nav;
}

The following image will explain this code snippet

here we used the grid-area property for each item in the container. and that name is used in the grid-template-areas property. we divided the body into 3 rows and 4 columns top row needs to be the header so we mention it 4 times so it will span the top row. the last row should be the footer so 4 times ft, it will span the bottom row. The middle row's first column is the navbar and the last column is the sidebar and the remaining is the main content.

The grid template area property is used for the parent container and the grid-area property is used for the child container. then only it will work.

How to align content in a grid?

To align all items of the grid at a time following property is used.

Place items

Place-items property is used to position the content in a cell. It is a shorthand property for justify-items and align-items similar to flex-box.

justify-items: <value>: It will help to position the items in the cell horizontally. it will apply to all cells in the grid.

• start:-at start of the cell.

• end:- at end of the cell.

• center:- at the center of the cell horizontally.

• stretch:- fills the width of the cell.

align-items: <value>: It will help to position the items in the cell vertically.it will apply to all cells in the grid. It has similar properties to justify items only difference is it will apply to the vertical axis.

How to place items in cells?

In this section, we will see how to place a particular item in a particular cell. When the grid is created it gives a number to the columns and rows as per the below image.

.container{
     display: grid;
     grid-template-columns: repeat(4,1fr);
     grid-template-rows:repeat(3,1fr) ;
}

here we created 4 columns which will get numbers from 1 to 5 and -1 to -5.similaerlly rows will get numbers from 1 to 4 and -1 to -4. Using this number we will place items in a particular cell.

• grid-column-start: from which column it should start.

• grid-column-end: at which column number it should end.

• grid-row-start: from which row it should start.

• grid-row-end: at which row it should end.

• grid-column: <start>/<end>.

• grid-row: <start>/<end>.

• grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

  this property is used with grid-template-areas explained in the previous section.

with the following example, we can understand it better

.container>div:first-child{
    grid-column: 1/3;
}

.container>div:nth-child(3){
    grid-column: 3/4;
    grid-row: 1/4;
}
.container>div:nth-child(6){
    grid-row: 2/4;
    grid-column-start:4;
}
.container>div:nth-child(7){
    grid-area: -2/-3/-1/-5;
}

• Item-1: grid-column:1/3 :- So it will span from col-1 to col-3

• Item-3: grid-column: 3/4, grid-row: 1/4:- This item will span columns 3 and 4. and rows 1 to 4.

• Item-6: grid-row: 2/4, grid-column-start: 4:- This item spans rows from 2 to 4 and it will start from column 4, as the end value is not mentioned it will by default go to the next column.

• Item-7: grid-area -2/-3/-1/-5:- This item span column -3 to -5. and row from -1 to -2 you can see it in the above image.

  The remaining items are auto-placed by the grid.

How to align content for individual cells?

Previously we see how to align items in the whole grid. Where in one go we can align all cells as per requirement. But if we want to align particular cells differently we will use the following properties

• Justify-self: Alignment horizontally

  In the following image, item-1 is at the end, item-3 is at the center and the remaining are at the start.

  .container>div:first-child{
      justify-self: end;
  }
  .container>div:nth-child(3){
      justify-self: center;
  }
  

  

• align-self: Alignment vertically

  In the following image, item-1 is at the end, item-3 is at the center and the remaining are at the start.

.container>div:first-child{
    align-self: end;
}
.container>div:nth-child(3){
    align-self: center;

}

• place-self: a combination of the above two properties

  place-self: <align-self>/justify-self; if only one value is given it will be applied for both. Item 1 is at the center of the cell and item 3 is at end of the cell

.container>div:first-child{
    place-self: center;
}
.container>div:nth-child(3){ 
    place-self: end;
}

Summary

So this is the grid where we have all control for the positioning of content. The following table contains the most used grid properties

Please find the code file in the following repository in the articles folder

Thank You For Reading!!!!!!!!!