CSS Grid Mystery Whitespace

Question

I'm trying to create a grid of images with CSS-Grid, and for some reason I get mystery white space around the first two items in the grid. When inspecting the images I don't see it labelled as padding, margin, or normal border.

I've tried removing the flex container from the inside of the grid, but nothing changes.

On FF and Safari the grid works as expected, but on Chrome it breaks, along with pushing the grid over the next item I have on the page, any ideas?

.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>

you are using `grid-template-rows: 25% auto auto;`. is the 25% really needed? it seems to be the culprit — Temani Afif, Jul 02 '19 at 08:58
@TemaniAfif Thank you! That fixed both the issues. I really appreciate it — Zach Zulanas, Jul 03 '19 at 02:33

Michael Benjamin · Accepted Answer · 2019-07-02T12:10:04.593

This may or may not solve the problem you're describing, but it's the bigger problem anyway.

You have three levels in your HTML structure:

The primary container (.sponsor-div)
The grid items / nested flex containers (a)
The flex items (img)

The problem is that you are applying grid properties to the grand-children of the grid container.

Grid properties only work within the parent-child relationship. The grid container is the parent. The grid items are the children.

Any descendants of the grid container beyond the children (such as your img grand-children) are outside the scope of grid layout and will ignore grid properties.

More details: Grid properties not working on elements inside grid container

Thanks! I got the problem solved by another comment but this is helpful information! — Zach Zulanas, Jul 03 '19 at 02:34

CSS Grid Mystery Whitespace

1 Answers1