我如何让我的gif显示在该网格的第一行和两列中？

Question

我正在尝试制作第一行和第二列是一张gif的卡片，说明该卡片适合带有边框的单元格内。但是，没有任何显示，单元格只是显示为空。

这是我正在使用的代码：

.detailsgrid {
  display:grid;
  grid-template-columns: 35px 1fr;
  grid-template-rows: 200px 40px 1fr 35px;
  border: solid 1px;
}

.detailsimg {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
  object-fit: cover;
}

<div class="detailsgrid">
  <img class="detailsimg" src="https://picsum.photos/100/100" width= 300px>
  </div>
  <div class="detailsname">
    Honing
  </div>
  <div class="detailsdescription">Straightening the blade so it stays sharp (no material is taken off the blade). </div>
  <i class="far fa-clock detailstimeicon"></i>
  <div class="detailstime">
    This is how often you should do it
  </div>
</div>

我尝试放置200px，以便gif可以显示空间，但理想情况下，我希望该区域由GIF大小确定。

一张图片以说明我要实现的目标：

“ >>

我该怎么办？

我正在尝试制作第一行和第二列是一张gif的卡片，说明该卡片适合带有边框的单元格内。但是，没有任何显示，单元格只是显示为空。 ...

Answer 1

您可以执行以下操作：