By setting the height and width of all images to 100%, I encountered a problem where they overflowed the grid container by 40px in height. I actually intended for the images to fit exactly within a 40px space.
HTML :
<div class="grid-container">
<div class="grid-item" style="order : 1 ;">
<a href="https://www.facebook.com/" target="_blank">
<img src="E:\HTML AND CSS\images\fb.jpg" height="100%" width="100%">
</a>
</div>
</div>
CSS :
.grid-container
{
background : red;
margin: 10px;
height: 50px;
display: grid;
grid-template-columns: auto auto auto auto auto ;
grid-template-rows:auto ;
justify-content: space-between;
align-content: start;
}
.grid-item
{
color: black;
border: 2px solid black;
}