Search code examples
htmlcsslayoutcss-grid

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

I am currently making a website to play around with css grid and I am making a "add friend" menu. The Layout should look like this:

enter image description here

HTML and 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>

And my result is almost correct but my "exit" button is not in the correct row.

enter image description here

I marked it with a green marker where the button should be, you can also check it with the layout above.

So my question is:

In the scss file I specified that the grid-item-exitbutton should span from the 1. column to the 2. column with "grid-column: 1 / 3". But it still is in the second row not spanning from the 1. to the 2..

Why does it do that?

Solution 
  • .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;  
}