固定宽度大于内容的CSS网格

Question

我有一个简单的CSS网格，其中包含一个单元格-<img>。网格的固定宽度为100px，并使用grid-auto-columns: 100%;缩小图像以适合内部：

.grid {
    display: grid;
    width: 100px;
    grid-auto-columns: 100%;

    background-color: #844;
}

.grid > * {
    grid-column: 1;
    grid-row: 1;
}

<div class='grid'>
  <img src='https://i.imgur.com/HAwaW3D.png' />
</div>

但是由于某种原因，网格的高度仍然保持不变，就像图像以其原始大小渲染一样，在单元格之后留有空白空间：

我一生无法找到避免这种情况的方法。

在这种情况下，关于如何使网格的高度与内容匹配的任何想法？

---

注意：我正在Firefox 56.2.5中进行测试