I'm facing an issue while trying to construct a grid of images using CSS Grid. Interestingly, I am encountering mysterious white space around the first two items in the grid. Upon inspecting the images, I am unable to identify any source of this white space such as padding, margin, or border.
Even after removing the flex container inside the grid, the issue persists without any improvement.
Notably, the grid functions correctly on Firefox and Safari, but it breaks on Chrome. Additionally, it pushes the grid to overlap the next item on the page. Any suggestions to resolve this?
.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%);
filter: grayscale(100%);
}
.sponsor-div img:hover {
transform: scale(1.3);
-webkit-filter: grayscale(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>
<!--- Numerous other <img> elements within <a> tags --->
</div>