CSS номер макета сетки на 1

Question

С моей сеткой я нахожу, что для того, чтобы она работала, она должна выходить на 1, следующим образом единственный способ, которым 3 раздела равномерно распределяются по странице, если я сделаю это 10, если на нем есть пробелправая часть экрана

.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 подробно расскажет об этом, но для того, чтобы вы быстро поняли, почему 10 - это правильно.Когда вы определяете столбец сетки, вы выбираете начальную и конечную позиции на основе изображения ниже.

Надеюсь, это поможет вам лучше понять, что происходит.