Exploring the realms of CSS grid on my website has led me to create an intriguing "add friend" menu design. The layout I am aiming for is depicted in this visual representation:
https://i.sstatic.net/vg2T8.png
Here is a snippet of the HTML and SCSS code being used:
.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>The current outcome almost matches the intended design, but there seems to be an issue with the placement of the "exit" button.
https://i.sstatic.net/nettC.png
I have highlighted the spot where the button should be located using a green marker. You can refer back to the above layout to confirm this discrepancy.
My main inquiry is:
In the SCSS file, I have explicitly specified that the grid-item-exitbutton should span from the first column to the second column using "grid-column: 1 / 3". However, it ends up in the second row instead of spanning as expected.
What could be causing this unexpected behavior?