无法使用 CSS Grid 消除 DIV 中图像下方的间隙答案

【问题标题】：Can't Eliminate Gap Below Image in DIV Using CSS Grid无法使用 CSS Grid 消除 DIV 中图像下方的间隙
【发布时间】：2020-10-21 05:02:56
【问题描述】：

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

基本上，我想消除图像和产品信息区域之间的差距。换句话说，我希望 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;
}

【问题讨论】：

网格就像一张桌子。除非您指定行高，否则每个网格单元的高度将与该行中的最高网格单元一样高。由于您的产品信息单元格高于图像单元格，因此如果不裁剪，图像将无法适应整个空间。

标签： html css css-grid

【解决方案1】：

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

grid-auto-row: auto 1fr;

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

【讨论】：

grid-auto-rows 运行良好。谢谢你。你在网格上是对的，我会重新审视这个方法。