样式CSS的最佳方法

Question

我使用的是 css网格，在这种情况下，我做了一个适合网格的div （绿色框）（右侧的颜色是绿色而不是黄色），并且在该div内我制作了另一个网格（2列），并且在左侧中有一个图像和在右侧，还有另一个div （红色一个）带有段落。 < br />

如您所见，我已经使用了高度为61vh的图像，否则图像将无法很好地适应，而且我还必须为红色框设置高度，否则它将超出绿色框。 { {3}} 我认为这不是正确的做法，我如何不用设置精确高度来做到？

.GreenBox{
    margin-bottom: 10px;
    grid-column: 2/4;
    grid-row: 6/7;
    width: 100%;
    height: 61vh;
    display: grid;
    margin-left: -200px;
    margin-right: -10px;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    border: 2px solid greenyellow;
}

.RedBox{
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    border: 1px solid red;
    height: 60.6vh;
    padding-left: 10px;
}

.PurpleBox{
    grid-row: 2;
    border: 1px solid blueviolet;
}

.Image{
    width: 100%;
    height: auto ;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}




                 <div className="GreenBox">
                    <img className="Image" src={foto2}/>
                    <div className="RedBox">
                        <p className="Paragraph">ILorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tellus eget velit cursus feugiat. Proin quis condimentum velit, a pellentesque erat. Maecenas consectetur eros et nibh condimentum pharetra. </p>
                    </div>
                </div>

PS：问题是，如果我调整页面大小始终存在一个底部空白，我想删除该空白并很好地适应绿框中的内容。