CSS Grid Layout 数量减 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 是正确的。当您定义网格列时，您将根据下图选择开始和结束位置。

希望这直观地帮助您更好地理解正在发生的事情。