无法使用CSS网格消除DIV中图像下方的间隙

Question

我正在使用CSS网格区域创建两列页面，左列（产品图像）将同时具有水平和垂直图像，而右列（选择）将是一个长格式。这是一张图片：

基本上，我想摆脱图像和product-info区域之间的空白。换句话说，我希望product-info和group-info与图像的底部（垂直或水平）对齐。消除该空间的唯一方法是通过object-fit:cover，但这会切掉大部分图片的大小取决于浏览器的宽度。我已经尝试了所有适合对象的选项，但似乎没有一个可以解决此问题。 CSS GRID根本不可能吗？似乎太基础了，我确定问题出在我身上。有人可以帮忙吗？

这是我的代码：

.full-container {
display:grid;
grid-template-columns: 2fr 2fr 3fr;
padding:20px;
grid-template-areas: 
" product-image product-image selection "
" product-info group-info selection "
}


.product-image {
grid-area: product-image;
}

.product-image > img {
width: 100%;
}


.selection {
grid-area: selection;
padding-left: 30px;
}

.product-info {
grid-area: product-info;
padding-right:30px;
}

.group-info {
grid-area: group-info;
}

Answer 1

您基本上希望第二行填充高度，因此请尝试将其添加到.full-container

grid-auto-row: auto 1fr;

（也就是说，我认为在这里使用网格只会增加更多的复杂性，而没有它可以实现，请尝试使用flex）