我的 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. 列跨越到带有“grid-column: 1 / 3”的 2. 列。但它仍然在第二行，没有从 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;  
}

我的 css 网格项目排序不正确，但我的结果几乎是正确的

My css grid item isnt ordered correctly but my result is almost correct

html

css

layout

css-grid