Here,in this code I want to understand what does the grid-column-start and grid-column-end specify ?

This is the HTML part of my code.

```
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>  
<div class="grid-item3">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>  
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>  

```

This is the CSS part of my code.

```
.grid-container 
 {
 display: grid;
 grid-template-columns: 100px 100px 100px;
 grid-gap : 50px;
 background-color: black;
 padding: 10px;
 }
 div 
 {
 background-color: rgba(255, 255, 255, 0.8);
 border: 1px solid rgba(0, 0, 0, 0.8);
 padding: 15px;
 font-size: 30px;
 text-align: center;
 }
.grid-item1
{
grid-column-start : 1 ;
grid-column-end : 3;
}

```

[![This is the output of the code](https://i.stack.imgur.com/OT5uV.png)](https://i.stack.imgur.com/OT5uV.png)
This is the output of the code.
So, what does grid-column-end specify here ?