Html Can'；使用CSS网格消除DIV中图像下方的间隙

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

基本上，我想摆脱之间的差距形象和产品信息领域。换句话说，我希望产品信息和组信息与图像的底部对齐（垂直或水平），唯一可以消除该空间的方法是通过

object-fit:cover

，但这会根据浏览器的宽度剪切图像的大部分。我尝试了所有的对象拟合选项，但似乎没有一个能解决这个问题。这在CSS网格中根本不可能实现吗？看起来很基本，我确信问题出在我身上。有人能帮忙吗

这是我的密码：

.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;
}

---

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

.full container

grid-auto-row: auto 1fr;

---

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

网格就像一张桌子。除非指定行高度，否则每个网格单元的高度将与该行中最高的网格单元的高度相同。由于您的产品信息单元格高于图像单元格，因此如果不进行裁剪，图像将无法容纳整个空间。grid-auto-rows工作得非常好。非常感谢。你是对的，我将重新讨论这个方法。