html css gallery网格与图像弹出查看器

Question

我尝试使用不同大小的图像，弹出图像查看器和普通网格制作图像库。此外，我应该只需单击即可下载图像。不幸的是我完全搞砸了css代码。 在我的画廊中仍然没有得到所需网格的错误是什么？

我的代码：

#thumbwrap {
  margin: 75px auto;
  width: 252px;
  height: 252px;
}

.thumb {
  float: left;
  /* must be floated for same cross browser position of larger image */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 200px;
  align-items: center;
}

.thumb img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  max-width: 100%;
}

.thumb:hover {
  border: 0;
  /* IE6 needs this to show large image */
  z-index: 1;
}

.thumb span {
  position: absolute;
  visibility: hidden;
}

.thumb:hover span {
  visibility: visible;
  top: 37px;
  left: 37px;
}

<div id="thumbwrap">
  <a class="thumb" download="" href="/path/to/image.jpg"><img alt="" height="auto" src="/path/to/image.jpg" width="200" /><span><img alt="" src="/path/to/image.jpg" /></span></a>
</div>