Css grid helps us to place our content inside a grid type layout.
How to use-just use following code(for a parent div with class container) -
<pre><code>.container{
 display: grid;
}
</code></pre>PROPERTIES-
1.ROW AND COLUMN-We have to specify how many rows and columns we want in our grid. To do that use following code inside parent: E.g.-for a grid of 3 columns and 3 rows of 50px each:
<pre><code>grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
</code></pre>2.GAP-This property is used for giving gap to rows and columns.E.g.-
<pre><code>row-gap: 10px;
column-gap: 10px;
</code></pre>3.COLUMN/ROW START/END-This property allows us to spread a particular children over more than one row/coluumn. E.g.-for a children with class- item,
<pre><code>.item{
 grid-column-start: 1;
 grid-column-end: 3;
}
</code></pre>4.JUSTIFY ITEMS-it is used to align items inside the parent horizontally. E.g.-
<pre><code>justify-items: center;
</code></pre>5.JUSTIFY SELF-it is used to align children horizontally. 
<pre><code>justify-self: center;
}
</code></pre>6.ALIGN ITEMS-this property is used to align items inside the container vertically.
<pre><code>align-items: center;
</code></pre>7.ALIGN SELF-for aligning the children vertically.
<pre><code>align-self: flex-end;
}
</code></pre>8.PLACE ITEMS-aligns both vertically and horizontally.
<pre><code>place-items: center;
</code></pre>

**Css grid** helps us to place our content inside a grid type layout.

**How to use-**just use following code(for a parent div with class container) -
```
.container{
    display: grid;
}```

**PROPERTIES-**

**1.ROW AND COLUMN-**We have to specify how many rows and columns we want in our grid. To do that use following code inside parent: E.g.-for a grid of 3 columns and 3 rows of 50px each:
```
grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;```

**2.GAP-**This property is used for giving gap to rows and columns.E.g.-
```
row-gap: 10px;
column-gap: 10px;```

**3.COLUMN/ROW START/END-**This property allows us to spread a particular children over more than one row/coluumn. E.g.-for a children with class- item,
```
.item{
    grid-column-start: 1;
    grid-column-end: 3;
}

```

**4.JUSTIFY ITEMS-**it is used to align items inside the parent horizontally. E.g.-
```
justify-items: center;```


**5.JUSTIFY SELF-**it is used to align children horizontally. 
```
justify-self: center;
}```


**6.ALIGN ITEMS-**this property is used to align items inside the container vertically.
```
align-items: center;```



**7.ALIGN SELF-**for aligning the children vertically.
```
align-self: flex-end;
}```


**8.PLACE ITEMS-**aligns both vertically and horizontally.
```
place-items: center;

```








Css Grid