CSS Grid Layout number out by 1

Question

With my grid I am finding that for it to work it has to be out by 1, the following is the only way the 3 sections are spread evenly across the page, if I make it 10,fr it has a gap on the right of the screen

.contact-information {
    display: grid;
    grid-template-columns: repeat(9,1fr);
    grid-auto-rows: minmax(90px, auto);
    width:100%;
    overflow:hidden;
}
.contact-left-section{
    grid-column: 1/4;
    grid-row: 1/2;
    background-color: red;
}
.contact-middle-section{
    grid-column: 4/7;
    grid-row: 1/2;
    background-color: blue;
}
.contact-right-section{
    grid-column: 7/10;
    grid-row: 1/2;
    background-color: yellow;
}

<section class="about light contact-information">
    <div class="contact-left-section">
      <div class="section-title">Phone</div>
        <div class="section-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="contact-middle-section">
      <div class="section-title">Services</div>
        <div class="section-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="contact-right-section">
      <div class="section-title">Email</div>
        <div class="section-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
</section>

Answer 1

CSS Tricks has a detailed dive into this but to give you quick visual understanding of why 10 is correct. When you are defining the grid-column you are picking the start and end position based on the image below.

Hope this visually helps you better understand what is going on.