In this article, we will study CSS Grid and we will try to understand what is CSS Grid and where it is used so lets get started.

🔸What is CSS Grid?

CSS Grid is a two-dimensional layout concept that is used to arrange the items in the webpage, it has completely changed the way we use to design the webpage in the past. We can define the layout of the entire page, then easily able to rearrange the layout for the different screen widths by writing a small piece of code this all can be done with the help of a CSS grid. By this, you can easily understand how powerful it is.

💠Important terms to remember:-

🔹Grid container:-

It is the parent element to which the display property is applied. Inside the container element, all the grid items are present.

🔹Grid items:-

It is the child element(direct decedent) of the parent element(ex: container element).

🔹Grid line:-

The line that divides the structure of the grid. They can be either vertical or horizontal. Vertical lines are known as "column grid lines" whereas horizontal lines are called as "rows grid lines".

🔹Grid cell:-

The space between the two adjacent column grid lines and two adjacent row grid lines forms a grid cell. It is a single unit.

🔹Grid Area:-

The total area surrounded by four grid lines is known as the grid area. It can consist of any number of grid cells.

🔸Grid properties:-

CSS Grid has some very important properties. There are two types of properties some are applied to the parent element and others to child element. So Now we will learn some important CSS Grid properties.

💠Properties for parent:-

🔹Display:-

It defines the element as the grid container and establishes the grid formatting context to its content. It has two values grid and inline grid.

Syntax:-

.container{
 display: grid | inline grid;
}

🔹Grid-template-columns | rows:-

This property is used to arrange the items into grid columns and grid rows because by default our items are arranged in an inline structure so to arrange them in a grid format we use these properties with space-separated values.

Syntax:-

.container{
 grid-template-columns:_ _ _ ;
 grid-template-rows:_ _ _;

You can insert any number of rows and columns as you want by assigning them proper values for example=> grid-template-columns:100px 100px 100px; then you will have three columns of 100px and the same works for rows. But if you have to insert the same value multiple times so there is an important function named repeat(), which makes our work easy we don't have to write the same value multiple times instead just write inside the repeat function the number of columns or rows you want and the size rest of the work it will do for you.

example:-

.container{
 grid-template-columns: repeat(5, 100px);
 grid-template-rows: repeat(5, 50px);

output=> It will give you 5 columns of 100px and 4 rows of 50px. you can also run this code and check it out yourself.

There is one important value named "fr**"** unit, it distributes the whole page in equal fractions.

🔹Grid-template-areas:-

This property defines the grid area by referencing those items that have grid area property.

• Repeating the names of the grid areas span the number of cells you want.

• The period(.) key is used for the empty grid cell.

• None value is used where no grid area is defined.

  Let's understand with the example-

<div class="container">
        <div class="item1">one</div>
        <div class="item2">two</div>
        <div class="item3">three</div>
        <div class="item4">four</div>
    </div>

.item1{
 grid-area: header;
 background:#0000;
}
.item2{
grid-area: main;
}
.item3{
 grid-area: sidebar;
}
.item{
 grid-area:footer;
}
.container{
 display: grid;
 grid-template-columns: repeat(4, 100px);
 grid-template-rows: auto;
 grid-template-areas:
 " header header header header"
 "main main . main"
 "footer footer footer footer";
}

Run this code in your editor and you will be able to see the layout.

🔹Grid-template:-

Grid-template is the shorthand property for the grid-template-rows, grid-template-columns and the grid-template-areas. we can declare all three properties at once in a single line.

Syntax:-

.container{
 grid-template: none | <grid-template-columns> / <grid-template-rows>;
}

• None:- it will set all the values to default.

• <grid-template-rows> / <grid-template-columns> :- this will declare the number of rows and columns and set the grid-template-areas to none.

  🔹gap:-

  This property is used to provide gaps between grid cells. It is very similar to the flexbox gap property but as the grid is a two-dimensional layout so there are two types column-gap and row-gap.

• Syntax:-

.container{
 gap: row-gap column-gap;
}

🔹justify-items:-

This property is used to align items in a grid cell in horizontal axis (inline).

.container{
 justify-content: start | end | center | stretch;
}

Start:- It will align items from the starting edge of the cell.

end:- it will align items from the end edge of the cell.

center:- this value will put the items in the center.

stretch:- it will stretch the items to fill the empty space(whole width) and it is a default property.

🔹align-items:-

This property works the same as justify-items and uses the same value but vertically(column-axis).

syntax:-

.container{
 align-items: start| end | center | strech.
}

Start:- It will align items from the starting edge of the cell.

end:- it will align items from the end edge of the cell.

center:- this value will put the items in the center of the cell.

stretch:- it will stretch the items to fill the empty space(whole height) and it is a default property.

Thank you for reading*......🙂*