CSS 网格神秘空白

Question

我正在尝试使用 CSS-Grid 创建一个图像网格，但由于某种原因，我在网格的前两项周围出现了神秘的空白。在检查图像时，我没有看到它被标记为填充、边距或正常边框。

我尝试从网格内部移除 flex 容器，但没有任何变化。

在 FF 和 Safari 上，网格按预期工作，但在 Chrome 上它会中断，同时将网格推到页面上的下一个项目上，有什么想法吗？

.sponsor-div {
  display: grid;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 25% auto auto;
}

.sponsor-div a {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 200px;
}

.sponsor-div img {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
  transition: all 0.2s ease;
  max-width: 150px;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.sponsor-div img:hover {
  transform: scale(1.3);
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

<div class="sponsor-div">
  <a href="http://equalityequation.co/"><img style="padding-top: 50px;" src="../img/EQ_Mark_Orange.png"></a>
  <a href="https://www.veggiemijas.com/"><img style="padding-top: 50px;" src="https://format-com-cld-res.cloudinary.com/image/private/s--SzQAA2I9--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive.apng/v1/9f726015881c70a0259861da1b288ab1/VM_Logo.png"></a>
  <a href="https://www.imatteryouth.org/"><img style="padding-top: 50px;" src="http://www.imatteryouth.org/wp-content/uploads/2016/02/new-imatter-logo-2.png"></a>
  <!--- A bunch of other <img>s inside <a> tags --->
</div>

Answer 1

这可能会也可能不会解决您所描述的问题，但无论如何这是更大的问题。

您的 HTML 结构具有三个层次：

1. 主容器 (.sponsor-div)
2. 网格项/嵌套弹性容器 (a)
3. 弹性项目 (img)

问题是您将网格属性应用于网格容器的孙子。

网格属性仅在父子关系中起作用。 网格容器是父级。网格项是子项。

网格容器的任何后代（例如您的imggrand-children）都超出了网格布局的范围，并且将忽略网格属性。

更多详情：Grid properties not working on elements inside grid container