CSS Grid not conforming

Red and Blue sections are next to each other but the yellow section is not on the same line and under the blue section, they are also both the same height as the red section, I can not work out where I have gone wrong

.contact-information {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(90px, auto);
  width: 100%;
  overflow: hidden;
}

.contact-left-section {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: red;
}

.contact-middle-section {
  grid-column: 3/6;
  grid-row: 1/2;
  background-color: blue;
}

.contact-right-section {
  grid-column: 6/9;
  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 class="contact-right-section">
      <div class="section-title">Email</div>
      <div class="section-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
</section>

Solution

Firstly, you had only defined eight columns instead of nine but more importantly, you had not closed the .contact-middle-section div leaving the layout broken.

.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/3;
  grid-row: 1/2;
  background-color: red;
}

.contact-middle-section {
  grid-column: 3/6;
  grid-row: 1/2;
  background-color: blue;
}

.contact-right-section {
  grid-column: 6/9;
  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>