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结构中包含三个级别：

主容器（.sponsor-div）
网格项目/嵌套的弹性容器（a）
弹性项目（img）

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

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

超出子代（例如您的img子代）的网格容器的任何后代都不在网格布局的范围内，并且将忽略网格属性。

更多详细信息：Grid properties not working on elements inside grid container

Answer 2

实际上，您在网格中使用minmax属性，并且在网格minmax属性中使用的第一个值是min-width，第二个值是max-width。您给了最小宽度200px，所以所有内部元素都采用了200px最小宽度。因此，如果减小最小宽度，则元素之间的空间将减小。

.sponsor-div {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(auto-fill, minmax(130px, 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="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.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>

CSS网格神秘空格

2 个答案: