Multiple grid-child in same grid-area

Question

I want to create a card which is pretty simple, and contains only an image, a paragraph and two buttons.
The card I want to create:

<div class="container">
  <img src="" alt="">
  <p></p>
  <button></button>
  <button></button>
</div>

.container{  
  padding: 2rem;
  grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

Then I place my buttons:

button{
  grid-column: content;
  grid-row: 2/3;
}

.container {
  padding: 2rem;
  grid-template-columns: [img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

button {
  grid-column: content;
  grid-row: 2/3;
}

<div class="container">
  <img src="" alt="">
  <p></p>
  <button></button>
  <button></button>
</div>

However, the buttons overlap and aren't next each other, so I wish to know if there's a way to place multiple grid-items in the sane grid-area and say that this area is like a flex-row wrapper?

I would have used flexbox with some divs which wrapped the buttons, and assigned this div inside the grid-area, but I want to use grid to gain knowledge of this CSS property. So I wonder if there is a native grid way to do so?

Answer 1

Please note: In production, I would use web-tiki answer, it is the natural way to do it.

However, you say that your purpose is to gain knowledge, so let's see an alternate way to get what you want, and in the line that you wanted to go.

Asign both buttons to the same grid cell, make the 40% of the available width, and use justify-self to place the second one to the right:

.container {
  display: grid;
  padding: 2rem;
  grid-template-columns: 120px 1fr;
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

img {
  grid-column: 1;
  grid-row: span 2;
}

p {
  grid-column: 2;
  grid-row: 1;
}

.btn1, .btn2 {
  grid-column: 2;
  grid-row: 2;
  width: 40%;
}

.btn2 {
    justify-self: end;
}

<div class="container">
  <img src="https://placehold.co/120x120/EEE/31343C" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat justo mattis magna sagittis, ac varius erat porttitor. Vivamus mollis pulvinar lacus in dignissim. Nunc eu nisi vitae augue ornare volutpat.</p>
  <button class="btn1">Btn 1</button>
  <button class="btn2">Btn 2</button>
</div>