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正确。在定义网格列时，您将根据下图选择开始和结束位置。

希望这可以从视觉上帮助您更好地了解发生了什么。