title: CSS Grid Mystery Whitespace
body: <p>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.</p>
  
  <p>I've tried removing the flex container from the inside of the grid, but nothing changes.</p>
  
  <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sponsor-div"&gt;
    &lt;a href="http://equalityequation.co/"&gt;&lt;img style="padding-top: 50px;" src="../img/EQ_Mark_Orange.png"&gt;&lt;/a&gt;
    &lt;a href="https://www.veggiemijas.com/"&gt;&lt;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"&gt;&lt;/a&gt;
    &lt;a href="https://www.imatteryouth.org/"&gt;&lt;img style="padding-top: 50px;" src="http://www.imatteryouth.org/wp-content/uploads/2016/02/new-imatter-logo-2.png"&gt;&lt;/a&gt;
    &lt;!--- A bunch of other &lt;img&gt;s inside &lt;a&gt; tags ---&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>