Columns overlapping while using grid layout - html

Question

I'm using the grid layout in CSS and my aim is to have an image, text, an input field and a button next to each other, spanning over two rows as illustrated here:
I've given the image the grid-column property of 1 / 1 so that it is only in the first column, and all the other elements have 2 / 2 so that they are in the second column.
The problem I'm facing is that the second column is overlapping the first column, as seen in this snippet:
.profile {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 20px;
}
img {
border-radius: 50%;
height: 100%;
margin-right: 2%;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.profile>*:not(img) {
grid-column: 2 / 3;
}
.sameline {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="profile">
<img src="https://image.ibb.co/nr3C7T/pic.png">
<div class="sameline">
<h2>Title</h2>
<button>Click</button>
</div>
<form method="post">
<input type="text">
</form>
</div>

Answer 1

All you had to do was increase grid-column-gap. This makes them non overlapping. Change the styling to suit your needs.
.profile {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 100px;
}
img {
border-radius: 50%;
height: 100%;
margin-right: 2%;
grid-column: 1 / 1;
grid-row: 1 / 2;
}
.profile>*:not(img) {
grid-column: 2 / 2;
}
.sameline {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="profile">
<img src="https://image.ibb.co/nr3C7T/pic.png">
<div class="sameline">
<h2>Title</h2>
<button>Click</button>
</div>
<form method="post">
<input type="text" style="width:100%;">
</form>
</div>
Hope this helps.

Answer 2

I'm not sure if I understand your problem correctly, but I think what you mean is that the second column in the second row is overlapping.
The grid-row property is not correctly used in this case. This property works with grid lines. So the first value is used to specify from which grid line the item starts, and the second one specifies the grid line where it should end. So in your case, you say that it should start from grid line 1 (so essentially the top border of the grid) and that it should end at grid line 2 (which is the grid line between the two columns).
What you actually want is for the image to start at grid line 1 and end at grid line 3, so that it covers both of rows. The same rule applies to the grid-column property.
.profile {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 100px;
}
img {
border-radius: 50%;
height: 100%;
margin-right: 2%;
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.profile>*:not(img) {
grid-column: 2 / 3;
}
.sameline {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="profile">
<img src="https://image.ibb.co/nr3C7T/pic.png">
<div class="sameline">
<h2>Title</h2>
<button>Click</button>
</div>
<form method="post">
<input type="text">
</form>
</div>