带图像的网格块和带文本的两个网格块

Question

我想要这样的东西。但我不知道该怎么处理图像，我该如何让它在包括手机在内的所有设备上都能响应并看起来很好？通常我使用flex，但现在我需要grid。此外，我真的不明白如何使用网格元素定位？

.grid-container {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {
background-color: yellow;
font-size: 30px;

}

.item3 {
width:100%;
grid-area: 1 / 2 / 3 / 3;
}

img {
width:100%;}

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">  <img src = "https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg"  ></div>  
</div>

Answer 1

我改为网格模板列：50%50%；并且图像宽度为100%；现在效果不错。