我的 CSS 网格项目没有正确排序，但我的结果几乎是正确的

Question

我目前正在制作一个使用 css 网格的网站，并且我正在制作一个“添加朋友”菜单。 布局应如下所示：

HTML 和 SCSS：

.container {
    height: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 70% 30%;
    grid-template-rows: 20% 60% 20%;
    gap: 10px;

    .grid-item {
        height: 100%;
        padding: 20px;

        .grid-item-input {
            grid-column: 1 / 2;
        }

        .grid-item-button {
            grid-column: 2 / 3;
        }

        .grid-item-content {
            grid-column: 1 / 3;
        }

        .grid-item-exitbutton {
            grid-column: 1 / 3;
        }
    }
}

<div class="container">
  <div class="grid-item grid-item-input">
    <ion-item>
      <ion-label position="fixed">Username</ion-label>
      <ion-input></ion-input>
    </ion-item>
  </div>

  <div class="grid-item grid-item-button">
    <ion-button color="primary">Add Friend</ion-button>
  </div>

  <div class="grid-item grid-item-content">
    <ion-text>Friend</ion-text>
    <ion-text color="tertiary">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam maxime vel temporibus quidem repellendus. Dolore sed, ipsa esse harum excepturi quae assumenda recusandae repellendus! Error sunt et labore, architecto magni quaerat sit molestiae eligendi est itaque, corrupti optio ratione enim aliquam perspiciatis ab, dolor maxime sint rem eveniet maiores quidem.
    </ion-text>
  </div>

  <div class="grid-item grid-item-exitbutton ion-text-center">
    <ion-button color="danger">
      <ion-icon name="close-outline"></ion-icon>
    </ion-button>
  </div>
</div>

我的结果几乎是正确的，但我的“退出”按钮不在正确的行中。

我用绿色标记标记了按钮应该在哪里，你也可以用上面的布局检查它。

所以我的问题是：

在 scss 文件中，我指定 grid-item-exitbutton 应从 1. 列跨越到 2. 列，并带有“grid-column: 1 / 3”。但它仍然在第二行，不跨越从 1. 到 2..

为什么要这样做？

Answer 1

.container {
    height: 100%;
    display: grid; 
    grid-template-columns: 7fr 3fr;
    grid-template-rows: 1fr 3fr 1fr;
    gap: 10px;    
}

.grid-item-content, .grid-item-exitbutton {
  grid-column: 1 / -1;  
}